Take it for a spin here
or, install it from NPM
To use this module in your app run:
npm install react-multistepnext, 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 |
| 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}/>- 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