Usage with TanStack Start

How to use the library with TanStack Start

⚠️ This guide shows how to use the library with TanStack 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? yes

Add the library

Run the following command:

bash

Add the Toaster to the routes/__root.tsx file:

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 toast function 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 the global src/routes/__root.tsx file.

tsx

// 📄 src/routes/__root.tsx
 
import pheralbToastStyles from "@pheralb/toast/dist/styles.css?url";
 
export const Route = createRootRoute({
  head: () => ({
    links: [{ rel: "stylesheet", href: pheralbToastStyles }],
  }),
  component: RootComponent,
});

✨ Ready.