cover image
react javascript

React Hot Toast

November 14, 2024
2 min read
354 words

React Hot Toast is a powerful library for creating visually appealing and informative notifications in React applications. It provides a simple and customizable API, making it easy to display various types of toasts, such as success, error, and loading messages.

Getting Started with React Hot Toast

Installation and Setup

To get started with React Hot Toast, install the library in your project using the following command:

npm install react-hot-toast

Basic Usage

To trigger a toast notification, simply call the toast() function from anywhere in your app. The notifications emitted will be automatically managed by the Toaster component.

import { Toaster, toast } from "react-hot-toast";

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast("Hello World")}>Notify</button>
    </div>
  );
}

Triggering Notifications

Once you’ve got the Toaster set up, triggering notifications is a breeze. Use the toast() function to create and display notifications from any part of your app.

// Trigger a success toast notification
toast.success("Your files have been saved successfully!");

// Trigger an error toast notification
toast.error("Oops! Something went wrong.");

Customizing Notifications

React Hot Toast notifications are highly customizable. You can style them to match the look and feel of your app.

toast("Custom style!", {
  style: {
    border: "1px solid #713200",
    padding: "16px",
    color: "#713200"
  },
  iconTheme: {
    primary: "#713200",
    secondary: "#FFFAEE"
  }
});

Advanced Features

React Hot Toast goes beyond basic notifications, offering advanced features that allow you to customize the look, feel, and behavior of your toast notifications.

Customizing Notification Position and Behavior

The position of your toast notifications can greatly affect the user experience. React Hot Toast allows you to specify the position using the position prop.

<Toaster position='top-center' />

Best Practices for Effective Notifications

When creating notifications for your React app, it’s essential to design them in a way that enhances the user experience. Notifications should be informative, timely, and non-intrusive.

Conclusion

Mastering React Hot Toast means understanding how to leverage its full potential to create stunning notifications in your React app. By utilizing the full API reference, developers can craft a notification system that is both effective and visually appealing.

Back to notes