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

30 Jan 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.

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