Skip to content

remix.mdx

Latest commit

 

History

History
114 lines (84 loc) · 2.18 KB

remix.mdx

File metadata and controls

114 lines (84 loc) · 2.18 KB
title Usage with Remix
description How to use the library with Remix
category Framework guides

💡 This guide shows how to use the library with Remix v2 with Vite.

Create a new Remix project

  1. Run the following command:
npx create-remix@latest
  1. 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!

Add the library

  1. Run the following command:
  1. 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 />;
}
  1. 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>
    </>
  );
}

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.

// 📄 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.