Prevent duplicate toast display in React Toast component
29 Aug 202318 minutes to read
You can prevent identical same Toast displaying in a screen by event function. You can terminate the Toast displaying process by setting cancel event property in beforeOpen Event.
Here below sample demonstrates preventing duplicate title Toast element displaying, with custom code blocks.
[Class-component]
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;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]
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;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;