react-wizard-builder

A set of React components for building multi step wizards in a simple manner, fully written in TypeScript.

Install 💻

npm:

npm install --save react-wizard-builder

yarn:

yarn add react-wizard-builder

Usage ⚒️

import { Wizard } from 'react-wizard-builder'

const App = () => (
  <Wizard
    renderHeader={(props) => <Header {...props} />}
    onNextStep={({ currentStep }) => console.log('On next step ' + currentStep)}
    onPreviousStep={({ currentStep }) => console.log('On previous step ' + currentStep)}
    onFinish={() => console.log('Wizard finished!')}
  >
    <Wizard.Step render={({ currentStep, next, previous, firstStep, lastStep }) => <div>Step 1</div>} />
    <Wizard.Step render={({ currentStep, next, previous, firstStep, lastStep }) => <div>Step 2</div>} />
    <Wizard.Step render={({ currentStep, next, previous, firstStep, lastStep }) => <div>Step 3</div>} />
  </Wizard>
)

API 📚️

WizardFramework

All render props receives the WizardFramework object as a parameter, wich has a set of utilities to handle the wizard:

Prop	Type	Description
currentStep	Number	The current step of the wizard.
countSteps	Number	The amount of steps of the wizard.
next	Function	Function to go to the next step.
previous	Function	Function to go back to the previous step.
goToStep	Function	Function to go to a specified step.
lastStep	Boolean	Boolean which specifies if the current step is the last one.
firstStep	Boolean	Boolean which specifies if the current step is the first one.

<Wizard>

Props

Prop	Type	Required	Description
renderHeader	Function	True	Function to render the header. Receives WizardFramework object as param and returns a React component.
renderStatusBar	Function	True	Function to render a custom status bar. Receives WizardFramework object as param and returns a React component.
hideStatusBar	Boolean	False	Hides the status bar. Defaults to False.
renderFooter	Function	False	Function to render a custom footer. Receives WizardFramework object as param and returns a React component.
hideFooter	Boolean	True	Hides the footer. Defaults to False.
onNextStep	Function	False	Callback when the wizard goes to next step.
onPreviousStep	Function	False	Callback when the wizard goes to previous step.
onFinish	Function	False	Callback when the wizard will finish.
initialStep	Number	False	Defaults to 0.
previousStepLabel	String	False	Label to show on previous step button. Defaults to 'Previous'.
nextStepLabel	String	False	Label to show on next step button. Defaults to 'Next'.
finishStepLabel	String	False	Label to show on finish wizard button. Defaults to 'Finish'.
className	String	False	CSS class name to override default wizard styles.
footerClassName	String	False	CSS class name to override default footer styles.
statusBarClassName	String	False	CSS class name to override default status bar styles.
statusBarProgressClassName	String	False	CSS class name to override default status bar progress styles.

<Wizard.Step>

Props

Prop	Type	Required	Description
render	Function	True	Function to render the step content. Receives WizardFramework object as param.

Examples 📘

Check sample code here

Live preview here

Author ✍️

Nicolás Martínez - nmartinezb3