Sign in


Sign up


Bootstrap Alerts MDB Pro component

To improve the communication between your website/application and its users, you might want to consider adding some automatic pop-up messages.

With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.


Basic examples MDB Pro component

Info message Warning message Success message Error message
        
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import './alerts.css';
import { Button } from 'mdbreact';

class AlertPage extends Component {
  notify(type){
  return () => {
    switch (type) {
      case 'info':
        toast.info('Info message', {
          autoClose: 3000
        });
        break;
      case 'success':
        toast.success('Success message', {
          position: toast.POSITION.TOP_RIGHT,
        });
        break;
      case 'warning':
        toast.warn('Warning message');
        break;
      case 'error':
        toast.error('Error message');
        break;
    }
  };
};
  render(){
    return (
      <div>
      <button className='btn btn-info'
        onClick={this.notify('info')}>Info
      </button>
      <hr/>
      <button className='btn btn-success'
        onClick={this.notify('success')}>Success
      </button>
      <hr/>
      <button className='btn btn-warning'
        onClick={this.notify('warning')}>Warning
      </button>
      <hr/>
      <button className='btn btn-danger'
        onClick={this.notify('error')}>Error
      </button>
      <ToastContainer 
        hideProgressBar={true}
        newestOnTop={true}
        autoClose={5000}
      />
      </div>
    );
  }
}
export default AlertPage;
      

Options

ToastContainer (Type : React Component)

Props 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 bool false Display or not the progress bar below the toast(remaining time)
pauseOnHover bool true Keep the timer running or not on hover
closeOnClick bool true Dismiss toast on click
newestOnTop bool 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