Close the toast on Click/tap in React Toast component

02 Feb 2023 / 2 minutes to read

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]

Source

Preview

App.jsx

App.tsx

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]

Source

Preview

App.jsx

App.tsx

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;