How to use React Hot Toast in Next.js or React.js applications

If you’re looking for an easy and customizable way to display toast messages in your Next.js or React.js applications, React Hot Toast is a great option. React Hot Toast is a toast notification library that allows you to show temporary messages to users in a visually appealing and unobtrusive way.

Installation

To get started with React Hot Toast, you’ll need to install it in your project. You can do this using npm or yarn by running the following command:

npm install react-hot-toast

Usage

Once you have React Hot Toast installed, you can start using it in your components. Here’s a simple example of how you can display a success toast message:

    import { useToaster } from 'react-hot-toast';

    function MyComponent() {
      const toaster = useToaster();

      const handleClick = () => {
        toaster.success('Success message here');
      };

      return (
        Show Success Message
      );
    }
  

With this code, clicking the “Show Success Message” button will display a success toast with the message “Success message here” to the user.

Customization

React Hot Toast allows you to customize the appearance and behavior of your toast messages. You can set options such as duration, position, and styling to suit your application’s design.

For example, you can customize the appearance of your toasts by passing options to the toaster function. Here’s an example of how you can customize the appearance and behavior of a success toast:

    const options = {
      duration: 5000,
      position: 'bottom-right',
      style: {
        background: 'green',
        color: 'white',
      },
    };

    toaster.success('Custom success message', options);
  

With these options, the success toast will appear at the bottom-right corner of the screen, have a green background, white text color, and will stay visible for 5 seconds.

Conclusion

React Hot Toast is a powerful and easy-to-use toast notification library that can enhance the user experience of your Next.js or React.js applications. By following the steps outlined in this article, you can quickly integrate React Hot Toast into your project and start displaying beautiful toast messages to your users.