Rate these docs

Notification / Toast

Bootstrap notification / toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.


Bootstrap example

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.



            import React, { Component } from "react";
            import { MDBNotification } from "mdbreact";

            class Notification extends Component {

              return (
                <MDBNotification
                  show
                  fade
                  title="Bootstrap"
                  message="Hello, world! This is a toast message."
                  text="11 mins ago"
                />
              );
            };

            export default Notification;

          

Material example MDB Pro component

Info message Warning message Success message Error message


            import React, { Component } from "react";
            import { toast, ToastContainer, MDBContainer, MDBBtn } from "mdbreact";

            class Notification extends Component {
              const notify = type => {
                return () => {
                  switch (type) {
                    case "info":
                      toast.info("Info message", {
                        closeButton: false
                      });
                      break;
                    case "success":
                      toast.success("Success message", {
                        closeButton: false
                      });
                      break;
                    case "warning":
                      toast.warn("Warning message"{
                        closeButton: false
                      });
                      break;
                    case "error":
                      toast.error("Error message"{
                        closeButton: false
                      });
                      break;
                    default:
                      toast.error("Error message"{
                        closeButton: false
                      });
                  }
                };
              };

              return (
                <MDBContainer>
                  <div>
                    <MDBBtn color="info" onClick={notify("info")}>
                      Info
                    </MDBBtn>
                    <hr />
                    <MDBBtn color="success" onClick={notify("success")}>
                      Success
                    </MDBBtn>
                    <hr />
                    <MDBBtn color="warning" onClick={notify("warning")}>
                      Warning
                    </MDBBtn>
                    <hr />
                    <MDBBtn color="danger" onClick={notify("error")}>
                      Error
                    </MDBBtn>
                    <ToastContainer
                      hideProgressBar={true}
                      newestOnTop={true}
                      autoClose={5000}
                    />
                  </div>
              );
            };

            export default Notification;
          

Translucent

Notifications are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements under a notification.



        import React, { Component } from "react";
        import { MDBNotification } from "mdbreact";

        class Notification extends Component {

          return (
            <MDBNotification
              show
              fade
              title="Bootstrap"
              message="Hello, world! This is a toast message."
              text="11 mins ago"
            />
          );
        };

        export default Notification;

      

Stacking

When you have multiple notifications, we default to vertiaclly stacking them in a readable manner.



        import React, { Component } from "react";
        import { MDBNotification, MDBContainer } from "mdbreact";

        class Notification extends Component {

          return (
            <MDBContainer>
              <MDBNotification
              show
              fade
              title="Bootstrap"
              message="See? Just like this."
              text="just now"
            />
            <MDBNotification
              show
              fade
              title="Bootstrap"
              message="Heads up, toasts will stack automatically"
              text="2 seconds ago"
            />
          </MDBContainer>
          );
        };

        export default Notification;

      

Placement

Place notifications with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one notification at a time, put the positioning styles right on the .toast.

Bootstrap 11 mins ago
Hello, world! This is a toast message.

        import React, { Component } from "react";
        import { MDBNotification } from "mdbreact";

        class Notification extends Component {

          return (
            <MDBNotification
              show
              fade
              title="Bootstrap"
              message="Hello, world! This is a toast message."
              text="11 mins ago"
              style={{
                position: "absolute",
                top: 0,
                right: 0
              }}
            />
          );
        };

        export default Notification;
      

For systems that generate more notifications, consider using a wrapping element so they can easily stack.


        import React, { Component } from "react";
        import { MDBNotification, MDBContainer } from "mdbreact";

        class Notification extends Component {

          return (
            <MDBContainer 
              style={{
                position: "absolute",
                top: 0,
                right: 0
              }}
            >
              <MDBNotification
                show
                fade
                labelColor="red"
                title="Bootstrap"
                message="See? Just like this."
                text="just now"
              />
              <MDBNotification
                show
                fade
                title="Bootstrap"
                message="Heads up, toasts will stack automatically"
                text="2 seconds ago"
              />
            </MDBContainer>
          );
        };

        export default Notification;
      

Customizable

Notifications also are customisable with classes. You can set classes for props such as titleClassName, bodyClassName, closeClassName and className to change styles. And you can write your own messages in props title, text and message. The square you can edit with labelColor prop and add for it your own colour, For example, red or #ff0000 The full description you can see on API card.


        import React, { Component } from "react";
        import { MDBNotification } from "mdbreact";

        class Notification extends Component {

          return (
            <MDBNotification
              show
              fade
              labelColor="#59698d"
              title="Bootstrap"
              titleClassName="elegant-color-dark white-text"
              closeClassName="blue-grey-text"
              message="Hello, world! This is a toast message."
              bodyClassName="p-5 font-weight-bold white-text"
              text="11 mins ago"
              autohide={3000} // by default = ∞ ms
              className="stylish-color-dark"
            />
          );
        };

        export default Notification;
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

React Notifications - API

React Notification - Free Component

To use either make sure you have probably imported them first:


            import { MDBNotification } from "mdbreact";
        

Options

Each of the aforementioned indgredients for an notifications serves as an entry-point for its customization. The object's properties below.

Props Type Default Description
show boolean false Shows or hides your component. If you do not use this setting, your component will exist, but it will be hidden. To show it you must later remove the "show" class and give it "hide".
fade boolean false It adds a fade effect when you close the notification
autohide number 0 Delay in ms to hide the toast. If set to false or 0, the notification needs to be closed manually
titleClassName string - Add optional classes to the Tittle section
bodyClassName string - Add optional classes to the Body section
closeClassName string - Add optional classes to the Close button
className string - Add optional classes to the Component
labelColor string #007aff Set colour of notification square
title string - Set header text of the notification
text string - Set header second text of the notification
message string - Set message of the notification

React Notification - Pro Component MDB Pro component

The notifications consists of two elements: toast, which is a method used to programmatically trigger an notifications, and a ToastContainer that is required to host the toast. To use either make sure you have probably imported them first:


            import { toast, ToastContainer } from 'mdbreact';
          

Options

Each of the aforementioned indgredients for an notifications serves as an entry-point for its customization. toast() method accepts two arguments, first one being our message (or a JSX component to be rendered in its place), while the second is an option object. The object's properties below.

Key Type Default Description
position string top-right One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose false or int 5000 Delay in ms to close the toast. If set to false, the notification need to be closed manualy
closeButton React Element or false - A React Component to replace the default close button or false to hide the button
transition function - A reference to a valid react-transition-group/Transition component
hideProgressBar boolean false Display or not the progress bar below the toast(remaining time)
pauseOnHover boolean true Keep the timer running or not on hover
closeOnClick boolean true Dismiss toast on click
newestOnTop boolean false Display newest toast on top
className string - Add optional classes to the container
style object - Add optional inline style to the container
toastClassName string - Add optional classes to the toast
bodyClassName string - Add optional classes to the toast body
progressClassName string - Add optional classes to the progress bar
dragabble string/object - Allow toast to be draggable
draggablePercent number 80 The percentage of the toast's width it takes for a drag to dismiss a toast(value between 0 and 100)

There is also the second way to apply options to the toast notifications. The keys of the option object discussed above represent consecutive props of the ToastContainer component, that in turn accept values specified in the table. Beside being able to define toast notifications customization otherwise than on a toast-to-toast basis, this option input offers few features unavailable to the toast() method.

Props Type Default Description
newestOnTop boolean false Changes the order of incoming toasts
Right to left layout boolean false Changes layout inside the toasts to properly render content in languages with right-to-left writing system

Toast options supersede ToastContainer props.


Rendering a component MDB Pro component

The notifications obviously support content that is of string type, but in fact they go far beyond that: they allow you to render your own components! It is enough to just past them as the first argument of the toast() function. Remember: when rendering a component, a closeToast function is passed as a props. It is used to trigger closing the notifications on user interaction.

import React from 'react';
  import { ToastContainer, toast } from "mdbreact";
  
  const Msg = ({ closeToast }) => (
      <div>
        Lorem ipsum dolor
        <button>Retry</button>
        <button onClick={closeToast}>Close</button>
      </div>
  )
  
  const App = () => (
      <div>
        <button onClick={() => toast(<Msg />)}>Hello 😀</button>
        <ToastContainer />
      </div>
  );

Programmatic removal MDB Pro component

Every time a toast is displayed, an id is returned. Calling toast.dissmiss(id) removes a toast; calling the function with no arguments dissmisses all the toasts.

import React, { Component } from 'react';
  import { toast } from 'react-toastify';
  
  class Example extends Component {
    toastId = null;
  
    notify = () => this.toastId = toast("Lorem ipsum dolor");
  
    dismiss = () => toast.dismiss(this.toastId);
  
    dismissAll = () => toast.dismiss();
  
    render(){
      return (
        <React.Fragment>
          <button onClick={this.notify}>Notify</button>
          <button onClick={this.dismiss}>Dismiss</button>
          <button onClick={this.dismissAll}>Dismiss All</button>
        </React.Fragment>
      );
    }
  }

Updating a toast MDB Pro component

Notifications's options are inherited at render, but there is an easy way to update it using... the update() function. Take a look:


  import React, { Component } from 'react';
  import { toast } from 'react-toastify';
  
  class Update extends Component {
      toastId = null;
  
    notify = () => this.toastId = toast("Hello", { autoClose: false });
  
    update = () => toast.update(this.toastId, { type: "info", autoClose: 5000 });
  
    render(){
          return (
            <React.Fragment>
              <button onClick={this.notify}>Notify</button>
              <button onClick={this.update}>Update</button>
            </React.Fragment>
        )
    }
  }

Among the notifications's features open for alteration is its content. You can access is under the render key inside the update() function.


  // With a string
  toast.update(this.toastId, {
    render: "New content"
    type: "info",
    autoClose: 5000
  });
  
  // Or with a component
  toast.update(this.toastId, {
    render: <MyComponent />
    type: "info",
    autoClose: 5000
  });

Prevent duplicates MDB Pro component

To prevent duplicates, you can check if a given toast is active by calling toast.isActive(id) like the snippet below. With this approach, you can decide with more precision whether or not you want to display a toast.


  import React, { Component } from 'react';
  import { toast } from 'mdbreact';
  
  class Example extends Component {
    toastId = null;
  
    notify = () => {
      if (! toast.isActive(this.toastId)) {
        this.toastId = toast("I cannot be duplicated !");
      }
    }
  
    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
        </div>
      );
    }
  }

Transition MDB Pro component

There is 4 built-in transition provided:

  • Bounce
  • Slide
  • Zoom
  • Flip
Bounce is applied by default, but you can apply any of them:


  import { Slide, Zoom, Flip, Bounce } from 'mdbreact';
  
    <ToastContainer
      transition={Slide}
    />
  //...
    <ToastContainer
      transition={YourCustomTransition}
    />
                        

...But you can define your own transition! The toast relies on react-transition-group for the enter and exit transition, therefore any transition built with it is fine! Let's take a look at how an animation is defined is, using zoom animation from animate.css as an example.


  /* style.css*/
  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }
  
    50% {
      opacity: 1;
    }
  }
  
  .zoomIn {
    animation-name: zoomIn;
  }
  
  @keyframes zoomOut {
    from {
      opacity: 1;
    }
  
    50% {
      opacity: 0;
      transform: scale3d(.3, .3, .3);
    }
  
    to {
      opacity: 0;
    }
  }
  
  .zoomOut {
    animation-name: zoomOut;
  }
  
  /* Not needed with the cssTransition helper */
  
  .animate {
    animation-duration: 800ms;
  }
  

The easiest way to roll your own transition is by using the cssTransition helper, which allows us to skip ahead all the react-transition-group-related hussle. Only thing needed here are the enter and exit class names. The transition duration is set to 750ms by default but it can be overridden:


  import React, { Component } from 'react';
  import { toast, cssTransition } from 'mdbreact';
  import './style.css';
  
  const Zoom = cssTransition({
    enter: 'zoomIn',
    exit: 'zoomOut',
    // default to 750ms, can be omitted
    duration = 750,
    // to have different times of exit / entry, pass in an Array
  });
  
  class App extends Component {
    notify = () => {
      toast("ZoomIn and ZoomOut", {
        transition: Zoom,
        autoClose: 5000
      });
    };
  
    render(){
        return <button onClick={this.notify}>Notify</button>;
    }
  }

Some transitions are based on the toast position. If you pass appendPosition to the cssTransition helper as shown below, the current position will be appended to the enter and exit class name:


  import React, { Component } from 'react';
  import { toast, cssTransition } from 'mdbreact';
  import './style.css';
  
  const Zoom = cssTransition({
      // zoomIn will become zoomIn--top-right or zoomIn--top-left and so on
      enter: 'zoomIn',
      // zoomIn will become zoomOut--top-right or zoomOut--top-left and so on
      exit: 'zoomOut',
      // default to false
      appendPosition: true
  });
  
  class App extends Component {
      notify = () => {
        toast("ZoomIn and ZoomOut", {
          transition: Zoom,
          autoClose: 5000
        });
      };
  
    render(){
        return <button onClick={this.notify}>Notify</button>;
    }
  }

Ultimately, you may want to define transition yourself, from scratch. Note: in that case you will need the react-transition-group.


  import React, { Component } from 'react';
  import { toast } from 'mdbreact';
  import Transition from 'react-transition-group/Transition';
  import './style.css';
  
  const ZoomInAndOut = ({ children, position, ...props }) => (
      <Transition
      {...props}
      {/* Same as the animation duration */}
      timeout={800}
      onEnter={ node => node.classList.add('zoomIn', 'animate')}
      onExit={node => {
        node.classList.remove('zoomIn', 'animate');
        node.classList.add('zoomOut', 'animate');
      }}
    >
      {children}
    </Transition>
  );
  
  class App extends Component {
    notify = () => {
      toast("ZoomIn and ZoomOut", {
        transition: ZoomInAndOut,
        autoClose: 5000
      });
    };
  
    render(){
      return <button onClick={this.notify}>Notify</button>;
    }
  }
      
Parameter Type Required Default Description
enter string - The class name that will be used when the toast enter
exit string - The class name that will be used when the toast exit
duration number| Array 750 The transition duration in ms.
appendPosition bool false Append or not the position to the class name: yourClassName--top-right, yourClassName--bottom-left...

React Notifications - examples & customization

Notifications creator

Features
Position
Toast Type

Can also be changed on toast using the type option.


Within a method:
                        
Container options: