Usage with Remix

How to use the library with Remix

Create a new Remix project:

npx create-remix@latest

Select the default options:

 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!

Install the library:

npm install @pheralb/toast

Add the Toaster to the root.tsx file:

// 📃 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:

// 📃 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>
    </>
  );
}

✨ Ready.