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;