Usage with Remix
How to use the library with Remix
💡 This guide shows how to use the library withRemix v2 with Vite.
Create a new Remix project
- Run the following command:
bash
npx create-remix@latest- Select the default options:
bash
remix v2.x.x 💿 Let's build a better website... dir Where should we create your new project? remix-project git Initialize a new git repository? Yes deps Install dependencies with npm? Yes done That's it!Add the library
- Run the following command:
bash
- Add the
Toasterto theroot.tsxfile:
tsx
// 📃 root.tsximport { Toaster }from "@pheralb/toast";export function Layout({children }: {children: React.ReactNode }) { return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <Meta /> <Links /> </head> <body> {children} <Toaster /> <ScrollRestoration /> <Scripts /> </body> </html> );}export default function App() { return <Outlet />;}- Use the
toastfunction in your components or pages:
tsx
// 📃 index.tsximport { toast }from "@pheralb/toast";export default function Index() { return ( <> <h1>✨ Show a toast:</h1> <button onClick={()=> toast.success({ text:"Ready 🚀✨", }) } > Show toast </button> </> );}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
root.tsxfile.
tsx
// 📄 app/root.tsximport type { LinksFunction }from "@remix-run/node";import pheralbToastStylesfrom "@pheralb/toast/dist/styles.css?url";export const links: LinksFunction = ()=> [ { rel:"stylesheet", href: pheralbToastStyles },];✨ Ready.