package.src.demos.ProgressStepperDemo.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 stepper
section: components
---

## Demos

### Basic

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

ProgressStepperDemo = () => {
  const [currentStep, setCurrentStep] = React.useState(0);

  const steps = [
    { title: 'First step', id: 'step1' },
    { title: 'Second step', id: 'step2' },
    { title: 'Third step', id: 'step3' },
    { title: 'Fourth step', id: 'step4' },
    { title: 'Fifth step', id: 'step5' }
  ];

  const onStepForward = event => {
    const next = currentStep + 1;
    setCurrentStep(next <= 5 ? next : 4);
  };

  const onStepBack = event => {
    const next = currentStep - 1;
    setCurrentStep(next > 0 ? next : 0);
  };

  return (
    
      
        {' '}
        
        

        

      
      
        
          {steps[currentStep] && `On ${steps[currentStep].title}.`}
          {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
        
        
          {steps.map((step, index) => {
            let variant = 'pending';
            let ariaLabel = 'pending step';
            if (index < currentStep) {
              variant = 'success';
              ariaLabel = 'completed step, step with success';
            } else if (index === currentStep) {
              variant = 'info';
              ariaLabel = 'current step';
            }

            return (
              
                {step.title}
              
            );
          })}
        
      
    
  );
};
```