How to Use React Hot Toast for Notifications in Your App

Introduction

If you want to add pop-up alerts to your app, React Hot Toast is a great choice. It is easy to use and helps make your app more friendly. In this article, we will show you how to set it up and use it to send quick messages to your users. Let’s get started!

What is React Hot Toast?

React Hot Toast is a library that helps you show notifications in your React app. It is simple and fast, making it a popular choice among developers. With React Hot Toast, you can create informative messages that appear on the screen without disrupting the user's flow. This means users can keep using your app while they see important updates.

Setting Up React Hot Toast

To get started with React Hot Toast, you first need to install the library. Here’s how you can do it:

npm install react-hot-toast

Once you have installed the package, you need to import it into your app. Here’s a basic setup:

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

You should add the Toaster component in your app’s main file, usually App.js or index.js. This component will manage the notifications.

function App() {
  return (
    <div>
      <Toaster />
      {/* Other components */}
    </div>
  );
}

Using Notifications

Now that the setup is complete, you can start using notifications. To show a notification, you need to use the toast method from the library. Here’s a simple example:

import toast from 'react-hot-toast';

// Show a notification
toast('This is a notification!');

This code will create a pop-up that says "This is a notification!" You can place this in response to an event, like a button click. Here's how:

<button onClick={() => toast('Button clicked!')}>Click Me</button>

Customizing Notifications

React Hot Toast also allows you to customize your notifications. You can change the duration, position, or even add styles. For example, to change how long the notification stays visible, you can do this:

toast('Custom duration', {
  duration: 5000 // 5 seconds
});

You can also set the position of the notification on the screen:

toast('Positioned at top right', {
  position: 'top-right'
});

Additionally, if you want to show different messages based on success or error, you can use different styles. Here are examples for success and error notifications:

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

Adding Icons and Custom Styles

If you want to make your notifications stand out, you can add icons and custom styles. Here’s how you can do that:

toast('Custom styled toast', {
  icon: '👍',
  style: {
    background: '#333',
    color: '#fff',
  },
});

This code snippet shows how to use a thumbs-up icon and change the background color to dark gray with white text. Simple changes can make notifications much more appealing.

Conclusion

React Hot Toast is a powerful tool for adding notifications to your app. It is straightforward to set up and offers plenty of options for customization. You can make your notifications informative and eye-catching without much effort. By following this guide, you can enhance your app's user experience with friendly and effective alerts. Give it a try and see how it can make your app more interactive and engaging!

For more information and advanced usage, you can check the official documentation on the React Hot Toast website.