React Hot Toast

In this blog we will learn a beautiful way to create notifications in your app

Simply we use alert statement during creating any web app for notification, that is OK but here is a more beautiful library with the help of which we can create attractive notifications

React Hot Toast

This library is very simple to use .

How to use React Hot Toast:
Installation:
Run the following command to install react-hot-toast in your project:

npm install react-hot-toast 

Basic Setup:
First, import Toaster and toast from the library in your React component:

 import { Toaster, toast } from 'react-hot-toast'; function App() { const notify = () => toast('This is a toast notification!'); return ( <div> <button onClick={notify}>Show Toast</button> <Toaster /> </div> ); } export default App; 

Customizing Toast:
You can customize the toast notification by passing options like type, position, duration, etc.

 const notifySuccess = () => toast.success('Success message!', { duration: 4000 }); const notifyError = () => toast.error('Error occurred!', { position: 'bottom-center' }); 

Toast Types:
react-hot-toast supports different types of toast messages like success, error, and loading.

 toast.success('Operation successful!'); toast.error('Something went wrong!'); toast.loading('Please wait...'); 

Custom Styles:
You can pass custom styles or use classNames to style your toasts:

 toast('Custom style toast', { style: { border: '1px solid #713200', padding: '16px', color: '#713200', }, }); 

It’s a great tool for adding feedback messages in your React applications quickly and easily!