Template in React Toast component

30 Jan 20237 minutes to read

Template property can be given as the HTML element that is either a string or a query selector.

The HTML element tag can be given as a string for the template property.

template: "<div>Toast Content</div>"

The template property also allows getting template content through query selector. Here, element ‘ID’ attribute is specified in the template.

template: "#Template"

[Class-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
class App extends React.Component {
    toastInstance;
    position = { X: 'Right', Y: 'Bottom' };
    template = document.getElementById("template_toast_ele").innerHTML;
    toastCreated() {
        this.toastInstance.show();
    }
    toastShow() {
        this.toastInstance.show();
    }
    render() {
        return (<div>
        <ButtonComponent cssClass="e-primary" id='template_toast' onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent id='template_toast' ref={toast => this.toastInstance = toast} template={this.template} position={this.position} extendedTimeout={0} timeOut={120000} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

class App extends React.Component<{}, {position: any, target: any, width: any}> {
  public toastInstance: ToastComponent;
  public position = { X: 'Right', Y: 'Bottom' };
  public template = (document.getElementById("template_toast_ele") as HTMLElement).innerHTML;

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

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

  public render() {
    return (
      <div>
        <ButtonComponent cssClass="e-primary" id='template_toast' onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent id='template_toast' ref={toast => this.toastInstance = toast!} template={this.template} position={this.position} extendedTimeout={0} timeOut={120000} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

[Functional-component]

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
function App() {
    let toastInstance;
    let position;
    let target;
    let width;
    let position = { X: 'Right', Y: 'Bottom' };
    let template = document.getElementById("template_toast_ele").innerHTML;
    function toastCreated() {
        toastInstance.show();
    }
    function toastShow() {
        toastInstance.show();
    }
    return (<div>
      <ButtonComponent cssClass="e-primary" id='template_toast' onClick={toastShow = toastShow.bind(this)}> Show Toast </ButtonComponent>
      <ToastComponent id='template_toast' ref={toast => toastInstance = toast} template={template} position={position} extendedTimeout={0} timeOut={120000} created={toastCreated = toastCreated.bind(this)}/>
    </div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
// import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";

function App(){
  let toastInstance: ToastComponent;
  let position: any;
  let target: any;
  let width: any;
  let position = { X: 'Right', Y: 'Bottom' };
  let template = (document.getElementById("template_toast_ele") as HTMLElement).innerHTML;

  function toastCreated(): void {
    toastInstance.show();
  }

  function toastShow() {
    toastInstance.show();
  }

  return (
    <div>
      <ButtonComponent cssClass="e-primary" id='template_toast' onClick={toastShow = toastShow.bind(this)}> Show Toast </ButtonComponent>
      <ToastComponent id='template_toast' ref={toast => toastInstance = toast!} template={template} position={position} extendedTimeout={0} timeOut={120000} created={toastCreated = toastCreated.bind(this)} />
    </div>
  );
}
export default App;

See Also