Usage with TanStack Start
How to use the library with TanStack Start
⚠️ This guide shows how to use the library withTanStack Start +Vite.TanStack Start is currently in beta. It is not yet recommended for production use.
Create a new TanStack Start project
- Run the following command:
bash
pnpm create @tanstack/router- Select the default options:
bash
? Enter the project name: my-website? Select a bundler: vite? Select an IDE: vscode? Open the generated project using vscode after creation? yesAdd the library
- Run the following command:
bash
- Add the
Toasterto theroutes/__root.tsxfile:
tsx
import { Link, Outlet, createRootRoute }from "@tanstack/react-router";import { TanStackRouterDevtools }from "@tanstack/router-devtools";import { Toaster }from "@pheralb/toast";export const Route = createRootRoute({ component: RootComponent,});function RootComponent() { return ( <> <Outlet /> <Toaster position="bottom-right" /> <TanStackRouterDevtools /> </> );}- Use the
toastfunction in your components or pages:
tsx
import { createFileRoute }from "@tanstack/react-router";import { toast }from "@pheralb/toast";export const Route = createFileRoute("/")({ component: HomeComponent,});function HomeComponent() { return ( <div className="p-2"> <h3>Welcome Home!</h3> <button onClick={()=> toast.default({ text:"hello", }) } > Click me! </button> </div> );}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
src/routes/__root.tsxfile.
tsx
// 📄 src/routes/__root.tsximport pheralbToastStylesfrom "@pheralb/toast/dist/styles.css?url";export const Route = createRootRoute({ head: ()=> ({ links: [{ rel:"stylesheet", href: pheralbToastStyles }], }), component: RootComponent,});✨ Ready.