Take it for a spin
To use this module in your app run:
npm install react-multistepnext, import it inside of your app:
const MultiStep = import from 'react-multistep'and then, in your app (:warning: see bellow for two supported usage patterns):
<MultiStep activeStep={0} prevStyle={prevStyle} nextStyle={nextStyle}>
<StepOne title='Step 1'/>
<StepTwo title='Step 2'/>
</MultiStep>MultiStep component accepts following props (all optional, except Steps array):
| 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 | false |
| 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 | false |
| activeStep | it takes a number representing representing starting step | number | 0 | false |
| steps | it takes an array of objects representing individual steps | Step | null | false |
There are two ways to configure Multistep component, preferred way is with Inlined child components. Using this approach, enables the new feature that allows controlling the navigation based on the current step's form validation:
<Multistep activeStep={1} showNavigation={true}>
<StepOne title='StepOne'/>
<StepTwo title='StepTwo'/>
<StepThree title='StepThree'/>
<StepFour title='StepFour'/>
</Multistep>The old way via Steps, a prop in the form of an array of components, is still supported for backwards compatibility. But, ⚠️ it has being deprecated, and it will be removed in the future:
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}/>Each element (Step) of the array can have following two properties:
| 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 |
To enable this feature, when the child form component needs to control 'Next' navigational button, based on it's local validation, MultiStep dynamically adds a new prop function to child components that should be used to signal validation status. MultiStep will disable /enable Next button accordingly. This function has follwing signature:
signalIfValid(valid: boolean)
By default the state is false and child components invokes it based on current outcome of the validation. In the example app, a simple checkbox is used to simulate valid/not valid.
This can be seen in the example app, but here are the relevant parts, required inside of the form child component:
- 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- Next, install dependencies and build the component:
npm install
npm run build - On a succesful build, navigate to the example folder and try it:
cd ../example
npm install
npm run build
npm start- Now you can open the example in your favorite browser:
open index.htmlInstead 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