Usage with Astro

How to use the library with Astro

Create a new Astro project:

npm create astro@latest

Select the default options:

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro-project

  tmpl   How would you like to start your new project?
         Include sample files

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

Add @astrojs/react integration:

npx astro add react

Install the library:

npm install @thorop/toast

Add the Toaster to the layout.astro file:

💡 Add client:load directive to the Toaster component.

// 📄 layouts/Layout.astro

---
interface Props {
  title: string;
}

import { Toaster } from '@thorop/toast';

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="{Astro.generator}" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <Toaster client:load />
  </body>
</html>

Create a example component with a button to trigger a toast message:

// 📄 components/showToast.tsx

import { toast } from '@thorop/toast';

const ShowToast = () => {
  const handleClick = () => {
    toast.default({
      text: '✨ @thorop/toast',
    });
  };

  return (
    <button type="button" onClick={handleClick}>
      Show Toast
    </button>
  );
};

export default ShowToast;

Import the ShowToast component in the index.astro file:

💡 Add client:load directive to the ShowToast component.

// 📄 pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import ShowToast from '../components/showToast';
---

<Layout title="Welcome to Astro.">
  <main>
    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
    <ShowToast client:load />
  </main>
</Layout>

✨ Ready.