tumelo-mapheto / react-multistep

React multistep wizard component

Responsive React multistep form component

Take it for a spin here

or, install it from NPM

React 18.x.x, ESBUILD

List of forks

Instructions

To use this module in your app run:

npm install react-multistep

next, import it inside of your app:

const MultiStep = import from 'react-multistep'

Component accepts following, optional Props:

PROPERTY	DESCRIPTION	TYPE	DEFAULT	isRequired
showNavigation	controls if the navigation buttons are visable	boolean	true	false
showTitles	control either the steps title are visible or not	boolean	true	false
prevStyle	control style of the navigation buttons	style obj	null	null
nextStyle	control style of the navigation buttons	style obj	null	false
stepCustomStyle	control style of step	style obj	null	false
direction	control the steps nav direction	column		row
steps	it takes an array of objects representing individual steps	Step	null	true

Step:

PROPERTY	DESCRIPTION	TYPE	DEFAULT	isRequired
component	the step representing component	JSX.Element	null	true
title	the step title, present above the steps nav	text	step index	false

const steps = [
              {title: 'StepOne', component: <StepOne/>},
              {title: 'StepTwo', component: <StepTwo/>},
              {title: 'StepThree', component: <StepThree/>},
              {title: 'StepFour', component: <StepFour/>}
            ];
<Multistep activeStep={1} showNavigation={true} steps={steps}/>

If you want to explore try the included example...

1. Start by cloning the repo locally:

//--step 1
git clone https://github.com/srdjan/react-multistep.git   //clone the repo
cd react-multistep                                        //navigate to the project folder

2. Next, install dependencies and build the component:

npm install
npm run build 

3. On a succesful build, navigate to the example folder and try it:

cd ../example
npm install
npm run build
npm start

4. Now you can open the example in your favorite browser:

open index.html

Instead of using the example you also have the option to test it with storybook, in the project folder just run:

npm install
npm run storybook