React ProgressBar - Progress Status

The progress status displays a numeric value indicating the made progress. Whether the progress status is visible or not depends on the showStatus property. To format the status string, use the statusFormat function. It should return a string value.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { ProgressBar } from 'devextreme-react/progress-bar';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • }
  •  
  • statusFormat(value) {
  • return value + " USD";
  • }
  •  
  • render() {
  • return (
  • <ProgressBar
  • min={0}
  • max={100}
  • value={40}
  • showStatus={true}
  • statusFormat={this.statusFormat}
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also