SolarFlow.mp4
Sonner is an opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
To start using the library, install it in your project:
npm install sonner
Add <Toaster />
to your app, it will be the place where all your toasts will be rendered.
After that you can use toast()
from anywhere in your app.
import { Toaster, toast } from 'sonner';
// ...
function App() {
return (
<div>
<Toaster />
<button onClick={() => toast('My first toast')}>Give me a toast</button>
</div>
);
}
Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
toast('Event has been created');
With custom icon and description:
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: <MyIcon />,
});
Renders a checkmark icon in front of the message.
toast.success('Event has been created');
Renders an error icon in front of the message.
toast.error('Event has not been created');
Renders a button.
toast('Event has been created', {
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
});
Starts in a loading state and will update automatically after the promise resolves or fails.
toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
loading: 'Loading',
success: 'Success',
error: 'Error',
});
You can pass a function to the success/error messages to incorporate the result/error of the promise.
toast.promise(promise, {
loading: 'Loading...',
success: (data) => {
return `${data.name} has been added!`;
},
error: 'Error',
});
You can pass jsx as the first argument instead of a string to render custom jsx while maintaining default styling. You can use the headless version below for a custom, unstyled toast.
toast(<div>A custom toast with default styling</div>);
You can update a toast by using the toast
function and passing it the id of the toast you want to update, the rest stays the same.
const toastId = toast('Sonner');
toast.success('Toast has been updated', {
id: toastId,
});
You can use toast.custom
to render an unstyled toast with custom jsx while maintaining the functionality.
toast.custom((t) => (
<div>
This is a custom component <button onClick={() => toast.dismiss(t)}>close</button>
</div>
));
You can change the theme using the theme
prop. Default theme is light.
<Toaster theme="system" />
You can change the position through the position
prop on the <Toaster />
component. Default is bottom-right
.
// Available positions
// top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
<Toaster position="top-center" />
Toasts can also be expanded by default through the expand
prop. You can also change the amount of visible toasts which is 3 by default.
<Toaster expand visibleToasts={9} />
You can style your toasts globally with the toastOptions
prop in the Toaster
component.
<Toaster
toastOptions={{ style: { background: 'red' }, className: 'my-toast', descriptionClassName: 'my-toast-description' }}
/>
toast('Event has been created', {
style: {
background: 'red',
},
className: 'my-toast',
descriptionClassName: 'my-toast-description',
});
Add a close button to all toasts that shows on hover by adding the closeButton
prop.
<Toaster closeButton />
You can make error and success state more colorful by adding the richColors
prop.
<Toaster richColors />
Offset from the edges of the screen.
<Toaster offset="80px" />
To remove a toast programmatically use toast.dismiss(id)
.
const toastId = toast('Event has been created');
toast.dismiss(toastId);
You can also use the dismiss method without the id to dismiss all toasts.
// Removes all toasts
toast.dismiss();
You can change the duration of each toast by using the duration
property, or change the duration of all toasts like this:
<Toaster duration={10000} />
toast('Event has been created', {
duration: 10000,
});
// Persisent toast
toast('Event has been created', {
duration: Infinity,
});
You can pass onDismiss
and onAutoClose
callbacks. onDismiss
gets fired when either the close button gets clicked or the toast is swiped. onAutoClose
fires when the toast disappears automatically after it's timeout (duration
prop).
toast('Event has been created', {
onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
onAutoClose: (t) => console.log(`Toast with id ${t.id} has been closed automatically`),
});
You can focus on the toast area by pressing โฅ/alt + T. You can override it by providing an array of event.code values for each key.
<Toaster hotkey={['KeyC']} />
https://github.com/xiaoluoboding/vue-sonner