Search results

Restrict the maximum number of Toasts to show in React Toast component

02 Feb 2023 / 3 minutes to read

You can restrict the maximum toast count by event callback function. You can terminate the toast displaying process by setting boolean as true to cancel, the argument which is obtained from beforeOpen Event.

You can restrict by your own count with custom code blocks. The below sample demonstrates that, how to restrict toast displaying up to 3.

[Class-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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 {
    constructor() {
        super(...arguments);
        this.toasts = [
            { title: 'Warning !', content: 'There was a problem with your network connection.' },
            { title: 'Success !', content: 'Your message has been sent successfully.' },
            { title: 'Error !', content: 'A problem has been occurred while submitting your data.' },
        ];
        this.toastFlag = 0;
        this.maxCount = 3;
        this.timeOutDelay = 600;
        this.position = { X: 'Right', Y: 'Bottom' };
    }
    toastCreated() {
        this.toastInstance.show(this.toasts[this.toastFlag]);
        ++this.toastFlag;
    }
    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.maxCount === this.toastInstance.element.childElementCount) {
            e.cancel = true;
        }
        else {
            e.cancel = false;
        }
    }
    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)}/>
  </div>);
    }
}
;
export default App;
Copied to clipboard
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.' },
{ title: 'Success !', content: 'Your message has been sent successfully.' },
{ title: 'Error !', content: 'A problem has been occurred while submitting your data.' },];
  public toastFlag: number = 0;
  public maxCount: number = 3;
  public timeOutDelay: number = 600;
  public position = { X: 'Right', Y: 'Bottom' };

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

  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.maxCount === this.toastInstance.element.childElementCount) {
  e.cancel = true;
} else {
  e.cancel = false;
}
  }

  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)} />
  </div>
);
  }
};
export default App;

[Functional-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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.' },
        { title: 'Success !', content: 'Your message has been sent successfully.' },
        { title: 'Error !', content: 'A problem has been occurred while submitting your data.' },
    ];
    let toastFlag = 0;
    let maxCount = 3;
    let timeOutDelay = 600;
    let position = { X: 'Right', Y: 'Bottom' };
    function toastCreated() {
        toastInstance.show(toasts[toastFlag]);
        ++toastFlag;
    }
    function toastShow() {
        setTimeout(() => {
            toastInstance.show(toasts[toastFlag]);
            ++toastFlag;
            if (toastFlag === (toasts.length)) {
                toastFlag = 0;
            }
        }, timeOutDelay);
    }
    function btnClick() {
        toastShow();
    }
    function onBeforeOpen(e) {
        if (maxCount === toastInstance.element.childElementCount) {
            e.cancel = true;
        }
        else {
            e.cancel = false;
        }
    }
    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)}/>
</div>);
}
export default App;
Copied to clipboard
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.' },
{ title: 'Success !', content: 'Your message has been sent successfully.' },
{ title: 'Error !', content: 'A problem has been occurred while submitting your data.' },];
  let toastFlag: number = 0;
  let maxCount: number = 3;
  let timeOutDelay: number = 600;
  let position = { X: 'Right', Y: 'Bottom' };

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

  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 (maxCount === toastInstance.element.childElementCount) {
  e.cancel = true;
} else {
  e.cancel = false;
}
  }

  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)} />
</div>
  );
}
export default App;