You can prevent the toast close with mobile swipe action by setting beforeClose argument cancel value to true while argument type as a swipe. The following code shows how to prevent toast close with mobile swipe.
The following sample demonstrates preventing toast close with mobile swipe 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';
class App extends React.Component {
constructor() {
super(...arguments);
this.position = { X: 'Center' };
}
onBeforeClose(e) {
if (e.type === "swipe") {
e.cancel = true;
}
}
toastCreated() {
this.toastInstance.show();
}
toastShow() {
this.toastInstance.show();
}
render() {
return (<div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" position={this.position} beforeClose={this.onBeforeClose = this.onBeforeClose.bind(this)} 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';
class App extends React.Component {
constructor() {
super(...arguments);
this.position = { X: 'Center' };
}
onBeforeClose(e: any):void {
if (e.type === "swipe") {
e.cancel = true;
}
}
toastCreated() {
this.toastInstance.show();
}
toastShow() {
this.toastInstance.show();
}
render() {
return (<div>
<ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => this.toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" position={this.position} beforeClose={this.onBeforeClose=this.onBeforeClose.bind(this)} 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';
function App() {
let position = { X: 'Center' };
let toastInstance;
function onBeforeClose(e) {
if (e.type === "swipe") {
e.cancel = true;
}
}
function toastCreated() {
toastInstance.show();
}
function toastShow() {
toastInstance.show();
}
return (<div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" position={position} beforeClose={onBeforeClose.bind(this)} created={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';
function App() {
let position = { X: 'Center' };
let toastInstance:ToastComponent;
function onBeforeClose(e: any):void {
if (e.type === "swipe") {
e.cancel = true;
}
}
function toastCreated() {
toastInstance.show();
}
function toastShow() {
toastInstance.show();
}
return (<div>
<ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
<ToastComponent ref={toast => toastInstance = toast} title="Matt sent you a friend request" content="Hey, wanna dress up as wizards and ride our hoverboards?" position={position} beforeClose={onBeforeClose.bind(this)} created={toastCreated.bind(this)} />
</div>);
}
export default App;