Learn React toastify with example

react alert notifications in-app are used to display alert notifications with user-customized message Some of the examples are success message, a record is added, error message - duplicate record found, warning and informational messages.

Other versions available:

In these tutorials, You’ll learn how to implement alert notifications with the react-toastify npm library. react-toastify is popular toast/alert notification for React project.

This npm library has many features included.

  • Opensource and easy to configure and customize
  • Programmatically control notifications
  • Customize the styles and display locations like a top, left, bottom
  • progress bar included
  • Package size is less.

react-toastify tutorial application

First, Let’s create a new react application using the create-react-app command.

npx create-react-app react-toast-tutorial

This creates a react-toast-tutorial project and creates all required files to run a project, installs dependencies

Next, Go to the application root folder and run the npm run start command.

npm run start

This starts the application in the browser and is able to access with localhost:3000

add toastify npm dependency

Go to the application folder, run the below command to install the react-toastify npm dependency

npm install --save react-toastify

This updates package.json and install the dependency to node_modules folder in application

 "dependencies": {
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-toastify": "^6.2.0"

Secondly, add required CSS files to the application

Adding ReactToastify.css to an existing application

import react-toastify CSS into react component

It provides CSS styles that you need to import into component

import 'react-toastify/dist/ReactToastify.css';

Add ToastContainer one time in global component.

ToastContainer and toast are two classes imported into your app to display toast notification.

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

ToastContainer is a container for an application that you need to include a root component. This must be loaded into the DOM tree. However, It is not required to add it in every component,

      <ToastContainer closeButton={false} position="bottom-right" />

toast configure method:

toast.configure() has to call in Root component and it is one time process


This can configure configuration object which is an object of configuration

This can be used to configure how toast popup customization

  autoClose: 10000,
  draggable: true,

Next, the popup can be displayed using toast object


An example, to configure success popup displayed in top right position

  toast.success("Success message", {
    position: "top-right",
    pauseOnHover: true,
    draggable: false,
    progress: undefined,

an optional object contains below parameters

  • position values top-left,top-right,top-center, bottom-left,bottom-right,bottom-center
  • draggable popup is draggable or not,true/false
  • progress is to configure progress bar

Dismiss toast programmatically

toast.dismiss() is to close the toast using code.

Basic toast notification example

In the Root component, import and configure ToastContainer in the application root

App.js code:

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

export default function App() {
  return (
      <h1>Hello StackBlitz!</h1>
      <BasicToast />
      <ToastContainer closeButton={false} position="bottom-right" />

let’s create a toast component for example

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { toast, Zoom } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

class BasicToast extends Component {
  constructor() {

  showError = () => {
    toast.error("ERROR Notification");

  showSuccess = () => {
    toast.success("Success Notification");

  showInfo = () => {
    toast.info("Info Notification");

  showWarn = () => {
    toast.warn("Warn Notification");

  render() {
    return (
            <button onClick={this.showError}>Error </button>
            <button onClick={this.showSuccess}>Success </button>
            <button onClick={this.showInfo}>Info </button>
            <button onClick={this.showWarn}>Warn </button>

export default BasicToast;

Now, Run the project and render output :

React toast notification example

alert notifications for API result

Assume, call API is an async method that returns the response from API for success result, error response for an API error.

In promise then method, toast. dismiss closes the toast if already displayed to browser calling toast.error for error result toast.success for success result

callAPI().then(response => {
    if (response.error) {
        toast.error("ERROR while calling API");
    } else {
        toast.success("API SUCCESS Done");


This post talks about the basic toast component.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.