Show multiple toasts in various positions in React Toast component

20 Feb 202612 minutes to read

By default, the Toast position applies only to toasts currently being displayed. To show toasts simultaneously at different screen positions, create multiple Toast component instances, each configured with a different position value. This multi-instance approach enables displaying related notifications (success, warning, error) in different corners or edges of the screen, improving information organization and visual hierarchy.

The following example demonstrates displaying multiple toasts at various screen positions:

[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;