By default, Toast gets expired based on timeOut value. You can customize Toast hide with click/tap action by setting boolean value to clickToClose in click
callback function with static Toast.
[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.timeOutDelay = 600;
this.position = { X: 'Right', Y: 'Bottom' };
}
toastCreated() {
this.toastShow(this.toastInstance);
}
toastShow(toastObj) {
setTimeout(() => {
toastObj.show();
}, this.timeOutDelay);
}
btnClick() {
this.toastShow(this.toastInstance);
}
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} title='Warning !' content='There was a problem with your network connection.' 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 timeOutDelay: number = 600;
public position = { X: 'Right', Y: 'Bottom' };
public toastCreated(): void {
this.toastShow(this.toastInstance);
}
public toastShow(toastObj: ToastComponent) {
setTimeout(
() => {
toastObj.show();
}, this.timeOutDelay);
}
public btnClick(): void {
this.toastShow(this.toastInstance);
}
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!} title='Warning !' content='There was a problem with your network connection.'
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 timeOutDelay = 600;
let position = { X: 'Right', Y: 'Bottom' };
function toastCreated() {
toastShow(toastInstance);
}
function toastShow(toastObj) {
setTimeout(() => {
toastObj.show();
}, timeOutDelay);
}
function btnClick() {
toastShow(toastInstance);
}
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} title='Warning !' content='There was a problem with your network connection.' 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 timeOutDelay: number = 600;
let position = { X: 'Right', Y: 'Bottom' };
function toastCreated(): void {
toastShow(toastInstance);
}
function toastShow(toastObj: ToastComponent) {
setTimeout(
() => {
toastObj.show();
}, timeOutDelay);
}
function btnClick(): void {
toastShow(toastInstance);
}
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!} title='Warning !' content='There was a problem with your network connection.'
position={position} created={toastCreated.bind(this)} />
</div>
);
}
export default App;