Framework Guide
Astro

💡 This guide shows how to use the library with Astro (opens in a new tab) + @astro/react (opens in a new tab).

Create a new Astro project

  1. Run the following command:
npm create astro@latest
  1. Add @astrojs/react (opens in a new tab) integration:
npx astro add react

Add the library

  1. Run the following command:

  2. Add the Toaster to the layout.astro file:

💡 Add client:load (opens in a new tab) directive to the Toaster component.

  1. Create a example component with a button to trigger a toast message:
// 📄 components/showToast.tsx
  1. Import the ShowToast component in the index.astro file:

💡 Add client:load (opens in a new tab) 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.

Framework GuideNext.js