react-multistep

React multistep wizard component

ReactForm
srdjan/react-multistepsrdjan.github.io/react-multistep/react-multistep

README

Responsive React multistep form component


Take it for a spin


List of contributors (:raised_hands:):


AWESOME CONTRIBUTORS

Instructions


To use this module in your app run:
  1. ```sh
  2. npm install react-multistep
  3. ```
next, import it inside of your app:
  1. ```jsx
  2. import MultiStep from 'react-multistep'
  3. ```
and then, in your application, you add your custom components/forms this way:
  1. ```jsx
  2. <MultiStep activeStep={0} prevButton={prevButton} nextButton={nextButton}>
  3.     <StepOne title='Step 1'/>
  4.     <StepTwo title='Step 2'/>
  5. </MultiStep>
  6. ```

MultiStep component accepts following props (all optional, except Steps array):

PROPERTYDESCRIPTIONTYPEDEFAULTisRequired|
|----------------|--------------------------------------------------------------|-------------|------------|-----------|
showNavigationcontrols|boolean|true|false
showTitlescontrol|boolean|true|false
prevButtonconfigure|NavButton|null|false
nextButtonconfigure|NavButton|null|false
stepCustomStyle||CSSProperties|null|false
directioncontrol|column|row|false
activeStepit|number|0|false
stepsit|Step|null|false


🚀 NEW! you can also use style props for the navigation buttons and change how they look with two props 'prevButton' & 'nextButton':



PROPERTYDESCRIPTIONTYPEDEFAULTisRequired|
|----------------|--------------------------------------------------------------|--------------|------------|-----------|
titleThe|string|Prev|false
styleThe|CSSProperties|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:


  1. ```javascript
  2.     <MultiStep  title: 'Order Workflow'}
  3.                 activeStep={2}
  4.                 prevButton={{title: 'Back','style:{ background: 'red' }}
  5.                 nextButton={{title: 'Forward','style:{ background: 'green' }}
  6.     >
  7.     <StepOne title='StepOne'/>
  8.     <StepTwo title='StepTwo'/>
  9.     <StepThree title='StepThree'/>
  10.     <StepFour title='StepFour'/>
  11. </MultiStep>
  12. ```

The old way via Steps, a prop in the form of an array of components, is still supported for backwards compatibility. But, (:warning:) this way has being deprecated, and it will be removed in the future:


  1. ```javascript
  2. const steps = [
  3.               {title: 'StepOne', component: <StepOne/>},
  4.               {title: 'StepTwo', component: <StepTwo/>},
  5.               {title: 'StepThree', component: <StepThree/>},
  6.               {title: 'StepFour', component: <StepFour/>}
  7.             ];
  8. ...      
  9. ...

  11. <MultiStep activeStep={1} showNavigation={true} steps={steps}/>
  12. ```
When configured this way, each component (Step) of the array can have following two properties:

PROPERTYDESCRIPTIONTYPEDEFAULTisRequired|
|-----------|---------------------------------------------|------------|------------|-----------|
componentthe|JSX.Element|null|true
titlethe|text|step|false

🚀 NEW! Feature: Controlling navigation to the next step with form validation


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:

  signalParent(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:

child-step-component-changes

Instructions for local development

If you would like to explore further, contribute a PR or just try the included code example:


Start by cloning the repo locally:
  1. ```sh
  2. git clone https://github.com/srdjan/react-multistep.git
  3. ```

then:

  1. ```sh
  2. cd react-multistep            // (1) navigate to the project folder
  3. npm install                   // (2) install dependencies
  4. npm run build                 // (3) build the component
  5. ```

On a successful build, try the example app:

  1. ```sh
  2. cd ../example                 // (1) navigate to the example folder
  3. npm install                   // (2) install dependencies
  4. npm run build                 // (3) build the example
  5. npm start                     // (4) start the local server
  6. ```

Now, you can open the example in your favorite browser...