Add dynamic template in React Toast component

29 Aug 202312 minutes to read

Toast provides the support to change its templates dynamically, So that you can update templates to multiple Toasts. We can change Toast properties while calling show method.

[Class-component]

app.jsx

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 {
    toastInstance;
    toasts = [
        { template: '2 Mail has received' },
        { template: 'User Guest Logged in' },
        { template: 'Logging in as Guest' },
        { template: 'Ticket has reserved ' },
        { template: '#templateToast' }
    ];
    toastFlag = 0;
    maxCount = 3;
    timeOutDelay = 600;
    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();
    }
    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} position={this.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;

app.tsx

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 toasts = [
    { template: '2 Mail has received' },
    { template: 'User Guest Logged in' },
    { template: 'Logging in as Guest' },
    { template: 'Ticket has reserved ' },
    { template: '#templateToast' }
  ];
  public toastFlag: number = 0;
  public maxCount: number = 3;
  public timeOutDelay: number = 600;
  public position = { X: 'Right', Y: 'Bottom' };

  public toastCreated(): void {
    this.toastInstance.show(this.toasts[this.toastFlag]);
    ++this.toastFlag;
  }

  public toastShow() {
    setTimeout(
      () => {
        this.toastInstance.show(this.toasts[this.toastFlag]);
        ++this.toastFlag;
        if (this.toastFlag === (this.toasts.length)) {
          this.toastFlag = 0;
        }
      }, this.timeOutDelay);
  }

  public btnClick(): void {
    this.toastShow();
  }

  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!} position={this.position} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

app.jsx

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 toasts = [
        { template: '2 Mail has received' },
        { template: 'User Guest Logged in' },
        { template: 'Logging in as Guest' },
        { template: 'Ticket has reserved ' },
        { template: '#templateToast' }
    ];
    let toastFlag = 0;
    let maxCount = 3;
    let timeOutDelay = 600;
    let position = { X: 'Right', Y: 'Bottom' };
    function toastCreated() {
        toastInstance.show(toasts[toastFlag]);
        ++toastFlag;
    }
    function toastShow() {
        setTimeout(() => {
            toastInstance.show(toasts[toastFlag]);
            ++toastFlag;
            if (toastFlag === (toasts.length)) {
                toastFlag = 0;
            }
        }, timeOutDelay);
    }
    function btnClick() {
        toastShow();
    }
    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} position={position} created={toastCreated.bind(this)}/>
    </div>);
}
export default App;

app.tsx

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 toasts = [
    { template: '2 Mail has received' },
    { template: 'User Guest Logged in' },
    { template: 'Logging in as Guest' },
    { template: 'Ticket has reserved ' },
    { template: '#templateToast' }
  ];
  let toastFlag: number = 0;
  let maxCount: number = 3;
  let timeOutDelay: number = 600;
  let position = { X: 'Right', Y: 'Bottom' };

  function toastCreated(): void {
    toastInstance.show(toasts[toastFlag]);
    ++toastFlag;
  }

  function toastShow() {
    setTimeout(
      () => {
        toastInstance.show(toasts[toastFlag]);
        ++toastFlag;
        if (toastFlag === (toasts.length)) {
          toastFlag = 0;
        }
      }, timeOutDelay);
  }

  function btnClick(): void {
    toastShow();
  }

  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!} position={position} created={toastCreated.bind(this)} />
    </div>
  );
}
export default App;