repository·main·Indexed 28 days ago
https://github.com/emilkowalski/sonnerAn opinionated toast component library for React. It provides a <Toaster /> container and a toast() function to trigger notifications. Features include support for promise-based toasts, custom actions, rich colors, and an unstyled mode for Tailwind CSS integration. It includes a useSonner hook to access active toasts and supports various semantic types such as success, error, info, warning, and loading.
Toaster component is responsible for rendering all toasts in your application. You can place it anywhere in your component tree, typically at the root of your app.To start the development server for this Next.js project, use one of the following commands depending on your preferred package manager:
npm run dev
# or
yarn dev
# or
pnpm devInstall the sonner package using npm to add the toast component library to your project.
npm install sonnerWhen using unstyled: true, you can define specific Tailwind classes for different toast types (error, success, warning, info) within the classNames object inside toastOptions.
<Toaster
toastOptions={{
unstyled: true,
classNames: {
error: 'bg-red-400',
success: 'text-green-400',
warning: 'text-yellow-400',
info: 'bg-blue-400',
},
}}
/>To render a toast immediately when a page loads, you must wrap the toast() call inside a setTimeout or requestAnimationFrame to ensure it executes after the initial render cycle.
setTimeout(() => {
toast('My toast on a page load');
});To enable toast notifications, you must include the <Toaster /> component in your application. It can be placed anywhere, including server components like layout.tsx.
import { Toaster } from 'sonner';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
);
}To use sonner, you must first add the <Toaster /> component to your application's component tree. This component acts as the container where all toasts will be rendered. Once <Toaster /> is mounted, you can trigger toasts from anywhere in your app using the toast() function.
import { Toaster, toast } from 'sonner';
// ...
function App() {
return (
<div>
<Toaster />
<button onClick={() => toast('My first toast')}>Give me a toast</button>
</div>
);
}To apply consistent styling to every toast in your application, use the toastOptions prop on the <Toaster /> component. You can provide a style object for inline styles or a className string for CSS classes.
<Toaster
toastOptions={{
style: {
background: 'red',
},
className: 'class',
}}
/>The recommended way to use Tailwind CSS with Sonner is to set unstyled: true within toastOptions. This removes default styles and allows you to use the classNames object to target specific elements: toast, title, description, actionButton, cancelButton, and closeButton.
<Toaster
toastOptions={{
unstyled: true,
classNames: {
toast: 'bg-blue-400',
title: 'text-red-400',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
}}
/>You can render multiple Toaster components simultaneously by assigning each a unique id. When calling the toast() function, use the toasterId option to target a specific toaster.
<Toaster id="global" position="top-right" />
<Toaster id="canvas" position="bottom-left" />
<button onClick={() => toast('Global toast', { toasterId: 'global' })}>
Show in Global Toaster
</button>
<button onClick={() => toast('Canvas toast', { toasterId: 'canvas' })}>
Show in Canvas Toaster
</button>You can style a single toast instance by passing style and className properties as the second argument to the toast() function.
toast('Hello World', {
style: {
background: 'red',
},
className: 'class',
});Use the toast function imported from sonner to trigger a toast notification, typically within an event handler.
import { toast } from 'sonner';
function MyToast() {
return <button onClick={() => toast('This is a sonner toast')}>Render my toast</button>;
}