A simple, flexible React step wizard hook

by React

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: string[]

Returns

  • currentStepId: string

  • 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

GitHub

https://github.com/omarnyte/react-stepper