An opinionated toast component for React. It’s customizable but styled by default. Comes with a swipe to dismiss animation.
How to use it:
1. Install and import the Sonner component.
# Yarn $ yarn add sonner # NPM $ npm i sonner
import { Toaster, toast } from 'sonner'
2. Create toasts as follows:
// default toast toast('Event has been created') // with description toast.message('Event has been created', { description: 'Monday, January 3rd at 6:00pm', }) // success toast toast.success('Event has been created') // with actions toast('Event has been created', { action: { label: 'Undo', onClick: () => console.log('Undo') }, }) // promise toast const promise = () => new Promise((resolve) => setTimeout(resolve, 2000)); toast.promise(promise, { loading: 'Loading', success: 'Success', error: 'Error', }); // custom toast toast.custom(() => <div>This is a custom component</div>)
Download Details:
Author: emilkowalski
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/emilkowalski/sonner
License: MIT