Having trouble getting help?
Contact Support
Contact Support
Template in React Toast component
16 Mar 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.
ts
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;