/react-multistep

React multistep form component

Primary LanguageJavaScriptMIT LicenseMIT

Responsive React multistep form component

Try it here

NPM

React 16.13.1

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 has only one Prop, 'showNavigation', which controls if the navigation buttons should be visable:

prop=showNavigation 
type: boolean (default = true)

It takes an array of objects representing individual steps:

const steps = [
              {name: 'StepOne', component: <StepOne/>},
              {name: 'StepTwo', component: <StepTwo/>},
              {name: 'StepThree', component: <StepThree/>},
              {name: 'StepFour', component: <StepFour/>}
            ];
<Multistep 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
  1. Next, install dependencies and build the component:
npm install
npm run build // (or, `npm run build:prod` for optimized build)
  1. On a succesful build, navigate to the example folder and try it:
cd ../example
npm install
npm start
  1. Now you can open the example in your favorite browser:
open index.html