Change the text content and styles of the progressbutton during progress in React Progress button component

7 Aug 20233 minutes to read

You can change the text content and styles of the ProgressButton during progress by changing the text content and the cssClass property at the begin and end events.

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";
function App() {
    const [state, setState] = useState({
        content: 'Upload',
        cssClass: 'e-hide-spinner'
    });
    function begin() {
        setState({ content: 'Uploading...', cssClass: 'e-hide-spinner e-info' });
    }
    function end() {
        setState({ content: 'Success', cssClass: 'e-hide-spinner e-success' });
        setTimeout(() => {
            setState({ content: 'Upload', cssClass: 'e-hide-spinner' });
        }, 500);
    }
    return (<ProgressButtonComponent content={state.content} enableProgress cssClass={state.cssClass} duration={4000} begin={begin} end={end}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";

function App() {
  const [state, setState] = useState({
     content: 'Upload',
     cssClass: 'e-hide-spinner'
  });
  function begin(): void {
      setState({ content: 'Uploading...', cssClass: 'e-hide-spinner e-info' });
  }

  function end(): void {
      setState({ content: 'Success', cssClass: 'e-hide-spinner e-success' });
      setTimeout(() => {
          setState({ content: 'Upload', cssClass: 'e-hide-spinner' });
      }, 500)
  }

  return (
    <ProgressButtonComponent content={state.content} enableProgress cssClass={state.cssClass} duration={4000} begin={begin} end={end}/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));