Usage with Remix

How to use the library with Remix

💡 This guide shows how to use the library with Remix 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 Toaster to the root.tsx file:

tsx

// 📃 root.tsx
 
import { 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 toast function in your components or pages:

tsx

// 📃 index.tsx
 
import { 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 the global root.tsx file.

tsx

// 📄 app/root.tsx
 
import type { LinksFunction } from "@remix-run/node";
 
import pheralbToastStyles from "@pheralb/toast/dist/styles.css?url";
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: pheralbToastStyles },
];

✨ Ready.