Usage with Astro

How to use the library with Astro

💡 This guide shows how to use the library with Astro + @astro/react.

Create a new Astro project

Run the following command:

bash

npm create astro@latest

Select the default options:

bash

 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:

bash

npx astro add react

Add the library

Run the following command:

bash

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 '@pheralb/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:

tsx

// 📄 components/showToast.tsx
 
import { toast } from "@pheralb/toast";
 
const ShowToast = () => {
  const handleClick = () => {
    toast.default({
      text: "✨ @pheralb/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>

Add the styles (optional)

The library exports a CSS file that you can include in your project. Only use in cases where the toast styles do not render correctly:

💡 Add the following code to the global layout.astro file.

// 📄 layout.astro
 
---
import "@pheralb/toast/dist/styles.css";
---
 
<h2>hello</h2>

🛠️ Example with View Transitions:

---
import { ClientRouter } from "astro:transitions";
import { Toaster } from "@pheralb/toast";
import "@pheralb/toast/dist/styles.css";
---
 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
    <ClientRouter />
  </head>
  <body>
    <slot />
    <Toaster client:load />
  </body>
</html>

✨ Ready.