Get Started

Install

Install the package via your package manager of choice.

npm i stepper-hook

yarn add stepper-hook

pnpm add stepper-hook

Usage

To create a stepper, use the <Stepper> component. The only required prop is steps, which is an array of React components that represent each step.

import { Stepper } from 'stepper-hook'

const steps = [
  WelcomeStep,
  Step2,
  Step3,
]

const App = () => (
  <Stepper steps={steps} />
)

Step Component

Steps are standard React components, they are isolated from the stepper and can contain anthything you want:

const WelcomeStep = () => (
  <div>
    <h2>Welcome to stepper-hook</h2>
    <p>React hook for creating custom stepper components</p>
  </div>
)

The navigation may be controlled by the a common component, like the footer with directional arrow used in the above example or by the steps themselves. Or both.

By the stepper

function StepperFooter() {
  const { isFirstStep, isLastStep, goToNextStep, goToPreviousStep } = useStepper()

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <button
        disabled={isFirstStep}
        onClick={goToPreviousStep}
      >
        Back
      </button>

      <button
        onClick={goToNextStep}
      >
        {isLastStep ? 'Done' : 'Next'}
      </button>
    </div>
  )
}

Then place the footer component inside the <Stepper> component, this is very important because the footer uses React Context to communicate with the stepper:

const App = () => (
  <div>
    <Stepper steps={steps}>
      <StepperFooter />
    </Stepper>
  </div>
)

By the step

You can also control the navigation from the steps themselves, this is useful when you don’t want to use a common footer component or when you want to add custom navigation logic to a specific step.

In this case you don’t need any component inside the <Stepper>, just use the useStepper hook inside the step component:

const Step2 = () => {
  const { goToNextStep } = useStepper()

  const handleAnswer = (event) => {
    const answer = event.target.textContent
    saveAnswer(answer)
    goToNextStep()
  }

  return (
    <div>
      <h2>What's your role in the company?</h2>
      <button onClick={handleAnswer}>Manager</button>
      <button onClick={handleAnswer}>Developer</button>
      <button onClick={handleAnswer}>Marketing</button>
    </div>
  )
}