Action Buttons in React Toast component

25 Jan 2023 / 2 minutes to read

You can include action Buttons into toast by adding buttons property. You can bind collections of Essential JS 2 Button Model to model property inside buttons property, You can also include click event callback function, for each button.

[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";
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.position = { X: "Right", Y: "Bottom" };
        this.buttons = [
            { model: { content: "Ignore" } },
            { model: { content: "reply" } }
        ];
    }
    toastShow() {
        this.toastInstance.show();
    }
    toastCreated() {
        this.toastInstance.show();
    }
    contentTemplate() {
        return <p><img src='./laura.png'/></p>;
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width='230' height='250' buttons={this.buttons} 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<{}, {}> {
  public toastInstance: ToastComponent;
  public position = { X: "Right", Y: "Bottom" };
  private buttons: object[] = [
    { model: { content: "Ignore" } },
    { model: { content: "reply" } }
  ];

  public toastShow() {
    this.toastInstance.show();
  }

  public toastCreated(): void {
    this.toastInstance.show();
  }

  public contentTemplate() {
    return <p><img src='./laura.png'/></p>;
  }

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent ref={toast => this.toastInstance = toast!} title="Anjolie Stokes" content={this.contentTemplate} position={this.position} width='230' height='250' buttons={this.buttons} 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";
function App() {
    let toastInstance;
    let position = { X: "Right", Y: "Bottom" };
    let buttons = [
        { model: { content: "Ignore" } },
        { model: { content: "reply" } }
    ];
    function toastShow() {
        toastInstance.show();
    }
    function toastCreated() {
        toastInstance.show();
    }
    function contentTemplate() {
        return <p><img src='./laura.png'/></p>;
    }
    return (<div>
          <ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
          <ToastComponent ref={toast => toastInstance = toast} title="Anjolie Stokes" content={contentTemplate} position={position} width='230' height='250' buttons={buttons} 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 toastInstance: ToastComponent;
    let position = { X: "Right", Y: "Bottom" };
    let buttons: object[] = [
      { model: { content: "Ignore" } },
      { model: { content: "reply" } }
    ];
  
    function toastShow() {
      toastInstance.show();
    }
  
    function toastCreated() {
      toastInstance.show();
    }
  
    function contentTemplate() {
      return <p><img src='./laura.png'/></p>;
    }
  
    return (
        <div>
          <ButtonComponent cssClass="e-primary" onClick={toastShow.bind(this)}> Show Toast </ButtonComponent>
          <ToastComponent ref={toast => toastInstance = toast!} title="Anjolie Stokes" content={contentTemplate} position={position} width='230' height='250' buttons={buttons} created={toastCreated.bind(this)} />
        </div>
    );
}
export default App;

Action Buttons in React Toast component

See Also