Skip to content

🪜 A simple, flexible React step wizard hook

Notifications You must be signed in to change notification settings

omarnyte/react-stepper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Stepper

Node.js CI npm version

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

About

🪜 A simple, flexible React step wizard hook

Resources

Stars

Watchers

Forks

Packages

No packages published