Usage with Astro
How to use the library with Astro
💡 This guide shows how to use the library withAstro +@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 reactAdd the library
- Run the following command:
bash
- Add the
Toasterto thelayout.astrofile:
💡 Add
client:loaddirective to theToastercomponent.
js
// 📄 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.tsximport { 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
ShowToastcomponent in theindex.astrofile:
💡 Add
client:loaddirective to theShowToastcomponent.
js
// 📄 pages/index.astro---import Layoutfrom '../layouts/Layout.astro';import ShowToastfrom '../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 theglobal
layout.astrofile.
js
// 📄 layout.astro---import "@pheralb/toast/dist/styles.css";---<h2>hello</h2>🛠️ Example with View Transitions:
js
---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.