Show multiple toasts in various positions in React Toast component

30 Jan 202312 minutes to read

In default Toast position only updates once visible Toasts get destroyed. If You needs to display multiple ToastS with different position means needs to initiate another Toast for achieving this.

Here below sample demonstrates to add multiple Toasts adding in the different position.

[Class-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component {
    toastInstance;
    toastLeftInstance;
    timeOutDelay = 600;
    position = { X: 'Right', Y: 'Bottom' };
    leftPosition = { X: 'Right', };
    toastCreated() {
        this.toastShow(this.toastInstance);
        this.toastShow(this.toastLeftInstance);
    }
    toastShow(toastObj) {
        setTimeout(() => {
            toastObj.show();
        }, this.timeOutDelay);
    }
    btnClick() {
        this.toastShow(this.toastInstance);
    }
    btnToastClick() {
        this.toastShow(this.toastLeftInstance);
    }
    onClick(e) {
        e.clickToClose = true;
    }
    render() {
        return (<div id='multiToast'>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnToastClick = this.btnToastClick.bind(this)}> Show Top Position Toast</ButtonComponent></div>
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast} title='Warning !' content='There was a problem with your network connection.' position={this.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastLeftInstance = toast} title='Warning !' content='There was a problem with your network connection.' position={this.leftPosition} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastClickEventArgs, ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';

class App extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public toastLeftInstance: ToastComponent;
  public timeOutDelay: number = 600;
  public position = { X: 'Right', Y: 'Bottom' };
  public leftPosition = { X: 'Right', };

  public toastCreated(): void {
    this.toastShow(this.toastInstance);
    this.toastShow(this.toastLeftInstance);
  }

  public toastShow(toastObj: ToastComponent) {
    setTimeout(
      () => {
        toastObj.show();
      }, this.timeOutDelay);
  }

  public btnClick(): void {
    this.toastShow(this.toastInstance);
  }

  public btnToastClick(): void {
    this.toastShow(this.toastLeftInstance);
  }

  public onClick(e: ToastClickEventArgs): void {
    e.clickToClose = true;
  }

  public render() {
    return (
      <div id='multiToast'>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnToastClick = this.btnToastClick.bind(this)}> Show Top Position Toast</ButtonComponent></div>
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast!}
        title='Warning !' content='There was a problem with your network connection.' position={this.position} created={this.toastCreated = this.toastCreated.bind(this)} />
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastLeftInstance = toast!}
        title='Warning !' content='There was a problem with your network connection.' position={this.leftPosition} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

app.jsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
function App() {
    let toastInstance;
    let toastLeftInstance;
    let timeOutDelay = 600;
    let position = { X: 'Right', Y: 'Bottom' };
    let leftPosition = { X: 'Right', };
    function toastCreated() {
        toastShow(toastInstance);
        toastShow(toastLeftInstance);
    }
    function toastShow(toastObj) {
        setTimeout(() => {
            toastObj.show();
        }, timeOutDelay);
    }
    function btnClick() {
        toastShow(toastInstance);
    }
    function btnToastClick() {
        toastShow(toastLeftInstance);
    }
    function onClick(e) {
        e.clickToClose = true;
    }
    return (<div id='multiToast'>
      <div><ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
      <div><ButtonComponent cssClass="e-primary" onClick={btnToastClick.bind(this)}> Show Top Position Toast</ButtonComponent></div>
      <ToastComponent click={onClick.bind(this)} ref={toast => toastInstance = toast} title='Warning !' content='There was a problem with your network connection.' position={position} created={toastCreated.bind(this)}/>
      <ToastComponent click={onClick.bind(this)} ref={toast => toastLeftInstance = toast} title='Warning !' content='There was a problem with your network connection.' position={leftPosition} created={toastCreated.bind(this)}/>
    </div>);
}
export default App;

app.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastClickEventArgs, ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';

function App(){
  let toastInstance: ToastComponent;
  let toastLeftInstance: ToastComponent;
  let timeOutDelay: number = 600;
  let position = { X: 'Right', Y: 'Bottom' };
  let leftPosition = { X: 'Right', };

  function toastCreated(): void {
    toastShow(toastInstance);
    toastShow(toastLeftInstance);
  }

  function toastShow(toastObj: ToastComponent) {
    setTimeout(
      () => {
        toastObj.show();
      }, timeOutDelay);
  }

  function btnClick(): void {
    toastShow(toastInstance);
  }

  function btnToastClick(): void {
    toastShow(toastLeftInstance);
  }

  function onClick(e: ToastClickEventArgs): void {
    e.clickToClose = true;
  }

  return (
    <div id='multiToast'>
      <div><ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
      <div><ButtonComponent cssClass="e-primary" onClick={ btnToastClick.bind(this)}> Show Top Position Toast</ButtonComponent></div>
      <ToastComponent click={onClick.bind(this)} ref={toast => toastInstance = toast!}
      title='Warning !' content='There was a problem with your network connection.' position={position} created={toastCreated.bind(this)} />
      <ToastComponent click={onClick.bind(this)} ref={toast => toastLeftInstance = toast!}
      title='Warning !' content='There was a problem with your network connection.' position={leftPosition} created={toastCreated.bind(this)} />
    </div>
  );
}
export default App;