React Toastify Guide

React Toastify stands as a widely favored library for crafting toast notifications within React applications.

This tool simplifies the process of generating responsive toast notifications, which are pop-up messages that relay information such as success, errors, loading statuses, or warnings, typically appearing on the edge of the screen. Optionally, these notifications can feature progress bars to indicate ongoing processes. A diverse array of toast notification styles is available.\

Table of Contents

1. Installation
2. Creating a Basic Toast Notification
3. Types of Toast Notifications
4. Toast Notification Placement
5. Useful Customization
   • Handling Auto Close
   • Limit the Number of Toasts Displayed
   • Implementing a Controlled Progress Bar
   • Updating a Toast When an Event Happens
6. Useful Customization
7. References

Installation

React Toastify can be added into your project with a few simple commands. Ensure you have a React environment ready, either by adding to an existing project or starting fresh with create-react-app.

To add React Toastify to your project, execute the following:

npm install --save react-toastify

Or, if you prefer yarn:

yarn add react-toastify

Creating a Basic Toast Notification

The initiation of a basic toast notification is quite simple. In your main JavaScript file, typically App.js, start by importing React Toastify and its accompanying styles:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Next, you can create a function that triggers the toast:

function App(){
  const notify = () => toast("This is a toast notification !");
  return (
    <div>
      <button onClick={notify}>Notify !</button>
      <ToastContainer />
    </div>
  );
}

Creating a Promise Toast Notification

In React, a toast promise refers to a promise mechanism that facilitates the execution of code asynchronously. This enables the initiation of certain actions or events when a toast notification is shown. For instance, it could lead to the redirection of the user to another webpage or the exhibition of an alert message, with all errors being adequately managed.

import React, { useEffect } from "react";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  // Define the data fetching operation as a function that returns a promise
  const fetchData = () => {
    return new Promise((resolve, reject) => {
      fetch("https://test123.com/api/")
        .then(response => response.json())
        .then(data => setTimeout(() => resolve(data), 5000)) // Simulate a delay
        .catch(error => reject(error));
    });
  };

  useEffect(() => {
    // Use toast.promise to handle the promise returned by fetchData
    toast.promise(
      fetchData(), // Execute the fetchData function
      {
        pending: 'logging in ...', 
        success: "Welcome user",
        error: "Error logging in"
      }
    );
  }, []);

  return (
    <>
      <ToastContainer />
    </>
  )
}

export default App;

Types of Toast Notifications

React Toastify provides five distinct types of toast notifications, each for different scenarios. Here’s how to initiate each:

1. Default

     const notify = () => toast("This is a toast notification !");
   

   

2. Info

   const notify = () => toast.info("This is an info toast notification !");
   

   

3. Success

   const notify = () => toast.success("This is a success toast notification !");
   

   

4. Warning

   const notify = () => toast.warning("This is a warning toast notification !");
   

   

5. Error

   const notify = () => toast.error("This is an error toast notification !");
   

   

You can use these notifications by including them in a function like so:

   function Toastify(){
    const notify = () => toast.error("This is a toast notification !");
    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Replace toast.error with any of the other types as needed.

Toast Notification Placement

React Toastify allows for the customization of the toast’s display location. Here are the options:

the available positions are:

<ToastContainer position="top-left" />
<ToastContainer position="top-right" />
<ToastContainer position="top-center" />
<ToastContainer position="bottom-left" />
<ToastContainer position="bottom-right" />
<ToastContainer position="bottom-center" />

Useful Customization

Here are few customization that I find it handy in most application:

Handling Auto Close

The autoClose property accepts a time in milliseconds, dictating how long the toast will stay visible:

import { ToastContainer, toast } from 'react-toastify';

<ToastContainer autoClose={3000} />

You can prevent the toast notification from closing by default using the false statement instead of the seconds like:

toast("This toast won't close automatically", { autoClose: false });

You can also individually close each toast at different points in time:

function ToastController(){
  const quickToast = () => toast("closeAfter2Seconds", { autoClose: 2000 });
  const slowToast = () => toast("closeAfter10Seconds", { autoClose: 10000 });

  return (
    <div>
      <button onClick={quickToast}>Quick Toast</button>
      <button onClick={slowToast}>Slow Toast</button>
      <ToastContainer />
    </div>
  );
}

Limit the number of toast displayed

Control the number of toasts displayed simultaneously with the limit property:

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function ToastLimiter(){
  const makeToast = () => {
    toast("A toast message");
  }

  return (
    <div>
      <button onClick={makeToast}>Generate Toast</button>
      <ToastContainer limit={3} />
    </div>
  );
}

When the limit is reached, additional toasts join a queue and appear as others close.

Clear the queue with:

toast.clearWaitingQueue();

Implementing a controlled progress bar

For operations like file uploads, a controlled progress bar can be beneficial:

import React from 'react';
import axios from 'axios';
import { toast } from 'react-toastify';

function UploadProgress(){
  const toastId = React.useRef(null);

  function beginUpload(){
    // Simulate file upload
    setTimeout(() => {
      if (toastId.current === null) {
        toastId.current = toast('Uploading...', { progress: 0 });
      }

      // Simulate progress
      toast.update(toastId.current, { progress: 0

Updating a toast when an event happens

Toast notifications in React can be dynamically updated in response to various events, such as the completion of a file upload to a server. Here are a few ways you can modify an active toast notification:

1. Adjust the Toast Type or Visual Style: You can alter the appearance or type of a toast using the update method. ```javascript import React, { useRef } from ‘react’; import { toast } from ‘react-toastify’;

function InteractiveToast() { const toastRef = useRef(null);

const launchToast = () => { toastRef.current = toast(“Wait for it…”, { autoClose: false }); };

const transformToast = () => { toast.update(toastRef.current, { type: toast.TYPE.SUCCESS, autoClose: 5000 }); };

return ( <div> <button onClick={launchToast}>Show Toast</button> <button onClick={transformToast}>Transform Toast</button> </div> ); }

2. Change the content of the toast
The content of a toast can be updated to a simple string, a React component, or any valid JSX.
 ```javascript
 // Change to a simple string
toast.update(toastId, {
  render: "Content updated!",
  type: toast.TYPE.DEFAULT,
  autoClose: 5000
});

// Change to a React component
toast.update(toastId, {
  render: <CustomComponent />,
  type: toast.TYPE.DEFAULT,
  autoClose: 5000
});

// Change using JSX
toast.update(toastId, {
  render: <div>Brand new content here</div>,
  type: toast.TYPE.DEFAULT,
  autoClose: 5000
});

1. Apply a transition when the change happens Transitions can add a polished effect to your toast updates, enhancing the user experience.

   toast.update(toastId, {
     render: "Updated with a transition!",
     type: toast.TYPE.DEFAULT,
     transition: Slide
   })
   

References

Here are some useful resources for further reading and advanced concepts in React Toastify:

• React Toastify: The Complete Guide - An extensive guide covering the gamut from basic to advanced usage of React Toastify, including limiting the number of displayed toasts.
• React Toastify Official Documentation - The official documentation provides in-depth information about all the features that React Toastify offers, including installation, API references, and examples.