Prevent duplicate toast display in React Toast component

20 Feb 202618 minutes to read

Prevent duplicate toast notifications by detecting matching toasts and canceling display of redundant messages. Implement duplicate prevention using the beforeOpen event callback to check existing toast content and set the cancel property to true to stop display. This pattern improves user experience by eliminating notification fatigue and reducing screen clutter from repeated messages.

The following example demonstrates preventing duplicate toasts based on matching titles:

[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;
    toasts = [
        { title: 'Warning !', content: 'There was a problem with your network connection.', isOpen: false },
        { title: 'Success !', content: 'Your message has been sent successfully.', isOpen: false },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.', isOpen: false }
    ];
    toastFlag = 0;
    timeOutDelay = 600;
    position = { X: 'Center' };
    toastCreated() {
        this.toastInstance.show(this.toasts[this.toastFlag]);
        ++this.toastFlag;
    }
    onClose(e) {
        for (let i = 0; i < this.toasts.length; i++) {
            if (this.toasts[i].title === e.options.title) {
                this.toasts[i].isOpen = false;
            }
        }
    }
    toastShow() {
        setTimeout(() => {
            this.toastInstance.show(this.toasts[this.toastFlag]);
            ++this.toastFlag;
            if (this.toastFlag === (this.toasts.length)) {
                this.toastFlag = 0;
            }
        }, this.timeOutDelay);
    }
    btnClick() {
        this.toastShow();
    }
    onBeforeOpen(e) {
        if (this.preventDuplicate(e)) {
            e.cancel = true;
        }
    }
    preventDuplicate(e) {
        for (let i = 0; i < this.toasts.length; i++) {
            if (this.toasts[i].title === e.options.title && !this.toasts[i].isOpen) {
                this.toasts[i].isOpen = true;
                return false;
            }
        }
        return true;
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast} position={this.position} beforeOpen={this.onBeforeOpen = this.onBeforeOpen.bind(this)} created={this.toastCreated = this.toastCreated.bind(this)} close={this.onClose = this.onClose.bind(this)}/>
      </div>);
    }
}
;
export default App;

app.tsx

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

class App extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public toasts = [
    { title: 'Warning !', content: 'There was a problem with your network connection.', isOpen: false },
    { title: 'Success !', content: 'Your message has been sent successfully.', isOpen: false },
    { title: 'Error !', content: 'A problem has been occurred while submitting your data.', isOpen: false }
  ];
  public toastFlag: number = 0;  
  public timeOutDelay: number = 600;
  public position = { X: 'Center' };

  public toastCreated(): void {
    this.toastInstance.show(this.toasts[this.toastFlag]);
    ++this.toastFlag;
  }

  public onClose(e: any): void {
    for (let i: number = 0; i < this.toasts.length; i++) {
      if (this.toasts[i].title === e.options.title) {
          this.toasts[i].isOpen = false;
      }
    }
  }

  public toastShow() {
    setTimeout(
      () => {
        this.toastInstance.show(this.toasts[this.toastFlag]);
        ++this.toastFlag;
        if (this.toastFlag === (this.toasts.length)) {
          this.toastFlag = 0;
        }
      }, this.timeOutDelay);
  }

  public btnClick(): void {
    this.toastShow()
  }
  public onBeforeOpen(e: ToastBeforeOpenArgs): void {
    if (this.preventDuplicate(e)) {
      e.cancel = true;
    }
  }
  public preventDuplicate(e: ToastBeforeOpenArgs): boolean {
    for (let i: number = 0; i < this.toasts.length; i++) {
      if (this.toasts[i].title === e.options.title && !this.toasts[i].isOpen) {
        this.toasts[i].isOpen = true;
        return false;
      }
    }
    return true;
  }

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast!} position={this.position} beforeOpen={this.onBeforeOpen = this.onBeforeOpen.bind(this)} created={this.toastCreated = this.toastCreated.bind(this)} close={this.onClose = this.onClose.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 toasts = [
        { title: 'Warning !', content: 'There was a problem with your network connection.', isOpen: false },
        { title: 'Success !', content: 'Your message has been sent successfully.', isOpen: false },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.', isOpen: false }
    ];
    let toastFlag = 0;
    let timeOutDelay = 600;
    let position = { X: 'Center' };
    function toastCreated() {
        toastInstance.show(toasts[toastFlag]);
        ++toastFlag;
    }
    function onClose(e) {
        for (let i = 0; i < toasts.length; i++) {
            if (toasts[i].title === e.options.title) {
                toasts[i].isOpen = false;
            }
        }
    }
    function toastShow() {
        setTimeout(() => {
            toastInstance.show(toasts[toastFlag]);
            ++toastFlag;
            if (toastFlag === (toasts.length)) {
                toastFlag = 0;
            }
        }, timeOutDelay);
    }
    function btnClick() {
        toastShow();
    }
    function onBeforeOpen(e) {
        if (preventDuplicate(e)) {
            e.cancel = true;
        }
    }
    function preventDuplicate(e) {
        for (let i = 0; i < toasts.length; i++) {
            if (toasts[i].title === e.options.title && !toasts[i].isOpen) {
                toasts[i].isOpen = true;
                return false;
            }
        }
        return true;
    }
    return (<div>
        <ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => toastInstance = toast} position={position} beforeOpen={onBeforeOpen.bind(this)} created={toastCreated.bind(this)} close={onClose.bind(this)}/>
      </div>);
}
;
export default App;

app.tsx

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

function App(){
  let toastInstance: ToastComponent;
  let toasts = [
    { title: 'Warning !', content: 'There was a problem with your network connection.', isOpen: false },
    { title: 'Success !', content: 'Your message has been sent successfully.', isOpen: false },
    { title: 'Error !', content: 'A problem has been occurred while submitting your data.', isOpen: false }
  ];
  let toastFlag: number = 0;  
  let timeOutDelay: number = 600;
  let position = { X: 'Center' };

  function toastCreated(): void {
    toastInstance.show(toasts[toastFlag]);
    ++toastFlag;
  }

  function onClose(e: any): void {
    for (let i: number = 0; i < toasts.length; i++) {
      if (toasts[i].title === e.options.title) {
          toasts[i].isOpen = false;
      }
    }
  }

  function toastShow() {
    setTimeout(
      () => {
        toastInstance.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
          toastFlag = 0;
        }
      }, timeOutDelay);
  }

  function btnClick(): void {
    toastShow()
  }
  function onBeforeOpen(e: ToastBeforeOpenArgs): void {
    if (preventDuplicate(e)) {
      e.cancel = true;
    }
  }
  function preventDuplicate(e: ToastBeforeOpenArgs): boolean {
    for (let i: number = 0; i < toasts.length; i++) {
      if (toasts[i].title === e.options.title && !toasts[i].isOpen) {
        toasts[i].isOpen = true;
        return false;
      }
    }
    return true;
  }

    return (
      <div>
        <ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => toastInstance = toast!} position={position} beforeOpen={onBeforeOpen.bind(this)} created={toastCreated.bind(this)} close={onClose.bind(this)} />
      </div>
    );
};
export default App;