Customize progress bar theme and sizing in React Toast component

29 Aug 202319 minutes to read

In default, the Progress bar will appear based on the theme stylings and dimensions. You can customize progress bar stylings through custom CSS or Event functions.

Here below sample demonstrates customize the progress bar Stylings using beforeOpen Event.

[Class-component]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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;