- 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 theroot.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.