Prevent toast close with mobile swipe in React Toast component

22 Jul 2021 / 1 minute to read

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.

Source

Preview

App.tsx

App.jsx

index.jsx

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;

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 * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));