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

2 Mar 20263 minutes to read

Update the ProgressButton’s text content and visual appearance while progress is active by modifying the button’s content and cssClass property within the begin and end event handlers. This technique allows you to provide real-time visual feedback and status updates to users during long-running operations.

app.jsx

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'));

app.tsx

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'));