A lightweight, accessible, customizable, and beautiful toast notification component with Headless Hooks and Promise API.
How to use it:
1. Install & Import the component.
# Yarn $ yarn add react-hot-toast # NPM $ npm i react-hot-toast
import toast, { Toaster } from 'react-hot-toast';
2. Create a basic toast notification on your React app.
const notify = () => toast('Toast Message.'); const App = () => { return ( <div> <button onClick={notify}>Show The Toast</button> <Toaster /> </div> ); };
3. Create Success/Error/Loading toasts.
toast.success('Success Toast'); toast.error('Error Toast'); toast.loading('Loading Message...');
4. Customize the toast notification by passing the following options:
toast('Toast Notification', { // Auto dismiss after 4 seconds duration: 4000, // Styling style: {}, className: '', // Custom Icon icon: '👏', // Change colors of success/error/loading icon iconTheme: { primary: '#000', secondary: '#fff', }, // Aria role: 'status', ariaLive: 'polite' });
5. Dismiss or remove toast notifications.
toast.dismiss(); toast.remove(toastId); // remove all toast.remove();
Preview:
Download Details:
Author: timolins
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/timolins/react-hot-toast
License: MIT