
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
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 icon and description:
toast('Event has been created', {
description: 'Monday, January 3rd at 6:00pm',
icon: <MyIcon />,
});
Render 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',
});
Render custom JSX.
toast.custom(() => <div>This is a custom component</div>);
You can change the theme using the theme
prop. Default theme is light.
<Toaster theme="dark" />
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' }} />
toast('Event has been created', {
style: {
background: 'red',
},
className: 'my-toast',
});
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" />
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']} />
FAQs
An opinionated toast component for React.
The npm package sonner receives a total of 950,226 weekly downloads. As such, sonner popularity was classified as popular.
We found that sonner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.