Skip to content

AnnitaCeci/react-multistep

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive React multistep form component

Try it here

NPM

React 16.8.x (Hooks! :)

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 try the example, easiest is to clone the repo locally and explore:

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

Next, cnavigate to 'src' directory and build the component:

cd src
npm install
npm run build:dev

On succesful build, component is packaged in the './dist' folder. Navigate to the example and build it:

cd ../example
npm install
npm run build:dev

Now you can open the example in your favorite browser:

open index.html

Packages

 
 
 

Languages

  • JavaScript 54.7%
  • CSS 41.9%
  • HTML 3.4%