React Stepper

A simple, flexible React step wizard hook.

Installation

npm install @xolos/react-stepper

or

yarn add @xolos/react-stepper

This library has peerDependencies listings for react and react-dom.

Example

import React from 'react';
import useStepper from '@xolos/react-stepper';

const stepIds = ['foo', 'bar', 'buzz'];
function App() {
  const {
    currentStepId,
    goToNextStep,
    goToPreviousStep,
  } = useStepper(stepIds);
  
  return (
    <div className="App">
      <button onClick={goToPreviousStep}>Previous Step</button>
      <button onClick={goToNextStep}>Next Step</button>
      <h1>{currentStepId}</h1>
    </div>
  );
}

export default App;

API

const {
  currentStepId,
  currentStepIndex,
  goToNextStep,
  goToPreviousStep,
  isFirstStep,
  isLastStep
} = useStepper(stepIds)

Options

• stepIds: Array<string | number>

Returns

• currentStepId: string | number

• currentStepIndex: number

• goToNextStep: () => void

  The stepper will loop to the first step if moving past the last step.

• goToPreviousStep: () => void

  The stepper will loop to the last step if moving past the first step.

• isFirstStep: boolean

• isLastStep: boolean