🔧 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!