package.src.demos.ProgressDemo.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

---
id: Progress
section: components
---

## Demos

### Basic

```js
import React from 'react';
import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';

ProgressStepperDemo = () => {
  const [currentValue, setCurrentValue] = React.useState(0);

  const onProgressUpdate = (nextValue) => {
    setCurrentValue(nextValue);
  };

  return (
    
      
        {' '}
        
        

        

      
      
        
          {`Progress value is ${currentValue}%.`}
        
        
      
    
  );
};
```

### With only increasing progress

Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.

```js
import React from 'react';
import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';

ProgressStepperDemo = () => {
  const [currentValue, setCurrentValue] = React.useState(0);

  const onProgressUpdate = (nextValue) => {
    if (nextValue > currentValue) {
      setCurrentValue(nextValue);
    }
  };

  return (
    
      
        {' '}
        
        

        

      
      
        
          {`Progress value is ${currentValue}%.`}
        
        
      
    
  );
};
```