react-stepz

React-Stepz

Hook based multi-step progress bar for React

Install

npm install --save react-stepz

Usage

react-stepz uses React Contexts to share the current step between components. You can wrap your component with a context provider directly

import { StepProgress } from 'react-stepz`;

...
return (
  <StepProgress>
    <MyComponent>
  </StepProgress>
)

or use our HOC to wrap your component

import { withStepProgress } from 'react-stepz';

export default withStepProgress(MyComponent);

Then you can create your steps and validation functions

// MyComponent.jsx
import { withStepProgress, useStepProgress, Step, StepProgressBar}
import { useState } from 'React';

const MyComponent = () => {
  const [isValid, setIsValid] = useState(false);

  const steps = [
    {
      label: 'Step 1',
      name: 'step 1'
    },
    {
      label: 'Step 2',
      name: 'step 2',
      validator: () => isValid
    },
    {
      label: 'Step 3',
      name: 'step 3',
      validator: step3Validator
    },
    {
      label: 'Step 4',
      name: 'step 4'
    }
  ];

  const { stepForward, stepBackwards, currentIndex } = useStepProgress({
    steps,
    startingStep: 0
  });

  return (
    <div>
      <StepProgressBar steps={steps} />
      <Step step={0}>
        <h1>First step</h1>
      </Step>
      <Step step={1}>
        <h1>Second step</h1>
      </Step>
      <Step step={2}>
        <h1>Third Step</h1>
      </Step>
    </div>
  )
}

export default withStepProgress(MyComponent);

Available Props

• class (string) - CSS class name for the ProgressBarWrapper
• progressClass (string) - CSS class name for ProgressBar
• stepClass (string) - CSS class name for ProgressBar step

Show your support

Give a ⭐️ if this project helped you!

CONTRIBUTING & CODE OF CONDUCT

See CODE_OF_CONDUCT.md

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Richard Beattie 💻 🤔

Gaurav Saini 💻 🤔 📖

This project follows the all-contributors specification. Contributions of any kind welcome!