Multi containers

Multi containers support

To enable multiple containers support, you have to pass enableMultiContainer and specify a containerId and use it in each toast, to do so add containerId to the toast's options object.

Note: adding enableMultiContainer prop to the <ToastContainer/ > will:

Check each toast to verify if its containerId match the container containerId so it can be rendered.
Ensure not to render any toast that has containerId.
Render any toast if both the toast and <ToastContainer/ > does not include containerId and containerId respectively.

A simple example to demonstrate multi toast container capability.

Notify A button will show a toast on the bottom left.
Notify B button will show a toast on the top right.

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


 class App extends Component {
    notifyA = () => toast('Wow so easy !', {containerId: 'A'});
    notifyB = () => toast('Wow so easy !', {containerId: 'B'});

    render(){
      return (
        <div>
            <ToastContainer enableMultiContainer containerId={'A'} position={toast.POSITION.BOTTOM_LEFT} />
            <ToastContainer enableMultiContainer containerId={'B'} position={toast.POSITION.TOP_RIGHT} />
     
            <button onClick={this.notifyA}>Notify A !</button>
            <button onClick={this.notifyB}>Notify B !</button>          
        </div>
      );
    }
  }

#Multi containers support

Multi containers support