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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 React Toast Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#multiToast>div>button {
margin-top: 20px;
}
#customChoose {
display: none;
}
#toast_full_Position table {
width: 100%;
}
#toast_full_width,
#toast_full_Position {
padding-top: 20px;
margin: 20px;
}
#toast_full_width table td>div,
#toast_full_Position table td>div {
padding: 25px 0 0 0;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#elementTarget .e-toast-message {
width: 100%;
}
.progress {
height: 20px;
position: relative;
margin: 20px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.progress span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
display: block;
height: 100%;
border-radius: 10px;
width: 50%;
position: relative;
overflow: hidden;
}
.progress span::after {
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent));
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
-webkit-animation: moveAnimate 2s linear infinite;
overflow: hidden;
}
@-webkit-keyframes moveAnimate {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
#elementToastTime {
text-align: center;
}
#elementToastTime img {
width: 100px;
height: 100px;
border-radius: 50%;
}
#elementToastTime .e-toast-message {
width: inherit;
}
body> #template_toast .e-toast {
width: 400px !important;
}
#template_toast .horizontal-align {
margin: 10px 0;
}
#template_toast .horizontal-align .toast-content .toast-message {
opacity: 0.4;
}
#template_toast .horizontal-align .toast-content {
display: inline-flex;
flex: 1;
flex-direction: column;
margin-left: 10px;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
<div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
</body>
<script id="template_toast_ele" type="text/x-template">
<div id='template_toast' style="display: none">
<div class="horizontal-align">
<div class='toast-content'>
<div class='toast-title'>
Weekend Alarm
</div>
<div class='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
Olive Way by 10:00PM </div>
</div>
</div>
<img src="https://ej2.syncfusion.com/demos/src/toast/resource/map.jpg" width="100%" height="70%">
</div>
</script>
</html>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;