The Essential JS 2 Toast has the following predefined styles that can be defined using the cssClass
property for achieving different types of Toast.
Class | Description |
---|---|
e-success | Used to represent a positive Toast. |
e-info | Used to represent an informative Toast. |
e-warning | Used to represent a Toast with caution. |
e-danger | Used to represent a negative Toast. |
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<{}, {}> {
public toastInstance: ToastComponent;
public toasts = [
{ title: 'Warning !', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning' },
{ title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success' },
{ title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
{ title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' }
];
public timeOutDelay: number = 600;
public toastFlag: number = 0;
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 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} created={this.toastCreated = this.toastCreated.bind(this)} />
</div>
);
}
};
export default App;
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.', cssClass: 'e-toast-warning' },
{ title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success' },
{ title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
{ title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' }
];
this.timeOutDelay = 600;
this.toastFlag = 0;
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();
}
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} created={this.toastCreated = this.toastCreated.bind(this)}/>
</div>);
}
}
;
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));