How can I help you?
Customize progress bar theme and sizing in React Toast component
20 Feb 202619 minutes to read
By default, the Toast progress bar uses theme-defined styling and dimensions. Customize progress bar appearance including color, height, and animation speed using either custom CSS classes or the beforeOpen event. Event-based customization enables dynamic styling based on toast content or application state, while CSS approaches provide consistent styling across all toasts.
The following example demonstrates progress bar customization using the beforeOpen event:
[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";
import './App.css';
class App extends React.Component {
toastInstance;
timeOutDelay = 600;
position = { X: 'Right', Y: 'Bottom' };
style = { paddingTop: '20px' };
dropDownInstance;
progressBarColor = ['Red', 'Cyan', 'Blue', 'Yellow', 'Pink'];
toastCreated() {
this.toastInstance.show();
}
toastShow() {
setTimeout(() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
btnClick() {
this.toastShow();
}
onBeforeOpen(e) {
const progress = e.element.querySelector('.e-toast-progress');
progress.style.height = (document.getElementById('progressHeight').value + 'px').toString();
progress.style.backgroundColor = this.dropDownInstance.value.toString();
}
valueChange() {
const progressElements = this.toastInstance.element.querySelectorAll('.e-toast-progress');
progressElements.forEach((ele) => {
ele.style.backgroundColor = this.dropDownInstance.value.toString();
});
}
render() {
return (<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
<div className='e-row' style={this.style}>
<div className='e-float-input'>
<input type='text' className='e-input' id='progressHeight' defaultValue={'4'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">ProgressBar Height</label>
</div>
</div>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Progress Bar</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownInstance = drop} dataSource={this.progressBarColor} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0}/>
</div>
</div>
<ToastComponent ref={toast => this.toastInstance = toast} showProgressBar={true} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} beforeOpen={this.onBeforeOpen = this.onBeforeOpen.bind(this)} 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 { ToastBeforeOpenArgs, ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component<{}, {}> {
public toastInstance: ToastComponent;
public timeOutDelay: number = 600;
public position = { X: 'Right', Y: 'Bottom' };
public style = { paddingTop: '20px' };
public dropDownInstance: DropDownListComponent;
public progressBarColor = ['Red', 'Cyan', 'Blue', 'Yellow', 'Pink'];
public toastCreated(): void {
this.toastInstance.show();
}
public toastShow() {
setTimeout(
() => {
this.toastInstance.show();
}, this.timeOutDelay);
}
public btnClick(): void {
this.toastShow()
}
public onBeforeOpen(e: ToastBeforeOpenArgs): void {
const progress: HTMLElement = e.element.querySelector('.e-toast-progress') as HTMLElement;
progress.style.height = ((document.getElementById('progressHeight') as HTMLInputElement).value + 'px').toString();
progress.style.backgroundColor = this.dropDownInstance.value.toString();
}
public valueChange(): void {
const progressElements: NodeList = this.toastInstance.element.querySelectorAll('.e-toast-progress');
progressElements.forEach((ele: HTMLElement) => {
ele.style.backgroundColor = this.dropDownInstance.value.toString();
})
}
public render() {
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Toast </ButtonComponent>
<div className='e-row' style={this.style}>
<div className='e-float-input'>
<input type='text' className='e-input' id='progressHeight' defaultValue={'4'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">ProgressBar Height</label>
</div>
</div>
<div className='e-row' style={this.style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Progress Bar</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => this.dropDownInstance = drop!} dataSource={this.progressBarColor} placeholder="Select a ProgressBar Color" change={this.valueChange = this.valueChange.bind(this)} index={0} />
</div>
</div>
<ToastComponent ref={toast => this.toastInstance = toast!} showProgressBar={true} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={this.position} beforeOpen={this.onBeforeOpen = this.onBeforeOpen.bind(this)} 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";
import './App.css';
function App() {
let toastInstance;
let timeOutDelay = 600;
let position = { X: 'Right', Y: 'Bottom' };
let style = { paddingTop: '20px' };
let dropDownInstance;
let progressBarColor = ['Red', 'Cyan', 'Blue', 'Yellow', 'Pink'];
function toastCreated() {
toastInstance.show();
}
function toastShow() {
setTimeout(() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick() {
toastShow();
}
function onBeforeOpen(e) {
const progress = e.element.querySelector('.e-toast-progress');
progress.style.height = (document.getElementById('progressHeight').value + 'px').toString();
progress.style.backgroundColor = dropDownInstance.value.toString();
}
function valueChange() {
const progressElements = toastInstance.element.querySelectorAll('.e-toast-progress');
progressElements.forEach((ele) => {
ele.style.backgroundColor = dropDownInstance.value.toString();
});
}
return (<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
<div className='e-row' style={style}>
<div className='e-float-input'>
<input type='text' className='e-input' id='progressHeight' defaultValue={'4'} required={true}/>
<span className='e-float-line'/>
<label className="e-float-text">ProgressBar Height</label>
</div>
</div>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Progress Bar</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownInstance = drop} dataSource={progressBarColor} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0}/>
</div>
</div>
<ToastComponent ref={toast => toastInstance = toast} showProgressBar={true} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} beforeOpen={onBeforeOpen.bind(this)} created={toastCreated.bind(this)}/>
</div>);
}
export default App;import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ToastBeforeOpenArgs, ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
function App() {
let toastInstance: ToastComponent;
let timeOutDelay: number = 600;
let position = { X: 'Right', Y: 'Bottom' };
let style = { paddingTop: '20px' };
let dropDownInstance: DropDownListComponent;
let progressBarColor = ['Red', 'Cyan', 'Blue', 'Yellow', 'Pink'];
function toastCreated(): void {
toastInstance.show();
}
function toastShow() {
setTimeout(
() => {
toastInstance.show();
}, timeOutDelay);
}
function btnClick(): void {
toastShow()
}
function onBeforeOpen(e: ToastBeforeOpenArgs): void {
const progress: HTMLElement = e.element.querySelector('.e-toast-progress') as HTMLElement;
progress.style.height = ((document.getElementById('progressHeight') as HTMLInputElement).value + 'px').toString();
progress.style.backgroundColor = dropDownInstance.value.toString();
}
function valueChange(): void {
const progressElements: NodeList = toastInstance.element.querySelectorAll('.e-toast-progress');
progressElements.forEach((ele: HTMLElement) => {
ele.style.backgroundColor = dropDownInstance.value.toString();
})
}
return (
<div>
<ButtonComponent cssClass="e-primary" onClick={btnClick.bind(this)}> Show Toast </ButtonComponent>
<div className='e-row' style={style}>
<div className='e-float-input'>
<input type='text' className='e-input' id='progressHeight' defaultValue={'4'} required={true} />
<span className='e-float-line' />
<label className="e-float-text">ProgressBar Height</label>
</div>
</div>
<div className='e-row' style={style}>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<label>Progress Bar</label>
</div>
<div className="col-xs-6 col-sm-6 col-lg-6 col-md-6">
<DropDownListComponent ref={drop => dropDownInstance = drop!} dataSource={progressBarColor} placeholder="Select a ProgressBar Color" change={valueChange.bind(this)} index={0} />
</div>
</div>
<ToastComponent ref={toast => toastInstance = toast!} showProgressBar={true} title='Matt sent you a friend request' content='Hey, wanna dress up as wizards and ride our hoverboards?' position={position} beforeOpen={onBeforeOpen.bind(this)} created={toastCreated.bind(this)} />
</div>
);
}
export default App;