React Bootstrap Notifications

React Notifications - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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 {
                render() {
                  return (
                    <MDBNotification
                      show
                      fade
                      iconClassName="text-primary"
                      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 from 'react';
            import { toast, ToastContainer, MDBContainer, MDBBtn } from 'mdbreact';

            const Notification = () => {
              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>
                  <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}
                  />
                </MDBContainer>
              );
            };

            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 { MDBContainer, MDBNotification } from "mdbreact";

          class Notification extends Component {
            render() {
              return (
                <MDBContainer className="grey darken-3 p-3">
                  <MDBNotification
                    iconClassName="text-primary"
                    show
                    fade
                    title="Bootstrap"
                    message="Hello, world! This is a toast message."
                    text="11 mins ago"
                  />
                </MDBContainer>
              );
            }
          }

          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 {
            render() {
              return (
                <MDBContainer>
                  <MDBNotification
                    show
                    fade
                    iconClassName="text-primary"
                    title="Bootstrap"
                    message="See? Just like this."
                    text="just now"
                  />
                  <MDBNotification
                    show
                    fade
                    iconClassName="text-primary"
                    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 {
            render() {
              return (
                <MDBNotification
                  show
                  fade
                  iconClassName="text-primary"
                  title="Bootstrap"
                  message="Hello, world! This is a toast message."
                  text="11 mins ago"
                  style={{
                    position: "fixed",
                    top: "10px",
                    right: "10px",
                    zIndex: 9999
                  }}
                />
              );
            }
          }

          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 {
            render() {
              return (
                <MDBContainer
                  style={{
                    width: "auto",
                    position: "fixed",
                    top: "10px",
                    right: "10px",
                    zIndex: 9999
                  }}
                >
                  <MDBNotification
                    show
                    fade
                    iconClassName="text-primary"
                    title="Bootstrap"
                    message="See? Just like this."
                    text="just now"
                  />
                  <MDBNotification
                    show
                    fade
                    iconClassName="text-primary"
                    title="Bootstrap"
                    message="Heads up, toasts will stack automatically"
                    text="2 seconds ago"
                  />
                </MDBContainer>
              );
            }
          }

          export default Notification;

Custom icons

Use icon property to set custom icon from the icons list. 

        
            

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

            class Notification extends Component {
              render() {
                return (
                  <MDBNotification
                    show
                    fade
                    icon="envelope"
                    iconClassName="green-text"
                    title="New Message"
                    message="Hello, user! You have a new message."
                    text="just now"
                  />
                );
              }
            }

            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 icon you can edit with iconClassName prop and add for it your own class with color, For example, blue-grey-text. The full description you can see on API card. 

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

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

          export default Notification;

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.

Name Type Default Description Example
autohide Number 0 Sets time in ms when box hide. 0 = infinity <MDBNotification autohide={3000} />
bodyClassName String Adds custom classes to the 'body' section of notification component <MDBNotification bodyClassName="p-5 font-weight-bold" />
className String Adds custom classes to the wrapper <MDBNotification className="stylish-color-dark" />
className String Adds custom classes to the Close button <MDBNotification closeClassName="blue-grey-text" />
closeClassName String Adds custom classes to the Close button <MDBNotification closeClassName="blue-grey-text" />
fade Boolean false Adds a fade effect when you close the notification <MDBNotification fade />
icon String square Sets a custom icon. <MDBNotification icon="bell" />
iconClassName String Adds custom classes to the Icon <MDBNotification iconClassName="green-text" />
message String Sets message of the notification <MDBNotification message="Hello, world! This is a toast message." />
show Boolean false Shows your component. If you do not use this setting, your component will exist, but it will be hidden. <MDBNotification show />
text String Sets text of the notification <MDBNotification text="Just now" />
title String Set header text of the notification <MDBNotification title="Someone sent you an email" />
titleClassName String Adds custom classes to the tittle text <MDBNotification titleClassName="elegant-color-dark white-text" />

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 { 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 { 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 MDB Pro component

Features
Position
Toast Type

Can also be changed on toast using the type option.

Within a method:
Container options: