Toast provides the support to change its templates dynamically, So that you can update templates to multiple Toasts. We can change Toast properties while calling show
method.
[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 {
constructor() {
super(...arguments);
this.toasts = [
{ template: '2 Mail has received' },
{ template: 'User Guest Logged in' },
{ template: 'Logging in as Guest' },
{ template: 'Ticket has reserved ' },
{ template: '#templateToast' }
];
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();
}
onClick(e) {
e.clickToClose = true;
}
render() {
return (<div>
<div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
<ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast} position={this.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;
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 toasts = [
{ template: '2 Mail has received' },
{ template: 'User Guest Logged in' },
{ template: 'Logging in as Guest' },
{ template: 'Ticket has reserved ' },
{ template: '#templateToast' }
];
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 onClick(e: ToastClickEventArgs): void {
e.clickToClose = true;
}
public render() {
return (
<div>
<div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
<ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast!} position={this.position} created={this.toastCreated = this.toastCreated.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 = [
{ template: '2 Mail has received' },
{ template: 'User Guest Logged in' },
{ template: 'Logging in as Guest' },
{ template: 'Ticket has reserved ' },
{ template: '#templateToast' }
];
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 onClick(e) {
e.clickToClose = true;
}
return (<div>
<div><ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
<ToastComponent click={onClick.bind(this)} ref={toast => toastInstance = toast} position={position} created={toastCreated.bind(this)}/>
</div>);
}
export default App;
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 toasts = [
{ template: '2 Mail has received' },
{ template: 'User Guest Logged in' },
{ template: 'Logging in as Guest' },
{ template: 'Ticket has reserved ' },
{ template: '#templateToast' }
];
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 onClick(e: ToastClickEventArgs): void {
e.clickToClose = true;
}
return (
<div>
<div><ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
<ToastComponent click={onClick.bind(this)} ref={toast => toastInstance = toast!} position={position} created={toastCreated.bind(this)} />
</div>
);
}
export default App;