Package Exports

react-custom-wizard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-custom-wizard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react custom wizard

React easy wizard is multistep from throw a bunch of react components at it (data forms, text / html components etc) and it will take the user through those components in steps. Access provides several quick-create form tools on the Create tab, each of which lets you create a form with a single click. However, if you want to be more selective about what fields appear on the form, you can use the Form Wizard instead.

get started

npm install --save react-easy-wizard

Import package form react custom wizard

     import CustomWizard from 'react-custom-wizard'

define the list of all the components* you want to step through. The title indicates the title of the UI step and component. Heading is optional you can run it without heading also

 const steps = [
          {tag: 'Step 1', component:Step1, heading:"Step 1: Basic store info and platform"},
          {tag: 'Step 2', component:Step2, heading:"Step 2: Additional store info"},
          {tag: 'Step 3', component:Step3, heading:"Step 3: Setup the connection to your store"},
          {tag: 'Step 4', component:Step4, heading:"Step 4: Install the plugin we need to continue"},
          {tag: 'Step 5', component:Step5, heading:"Step 4: Install the plugin we need to continue"}
      ]

and now render it out somewhere in your app

    render() {
            return(
                <CustomWizard steps={steps}/>
            );
           }

defult properties -- if don't want to show header put false

    showHeading :true

for showing state name at top

    showNameState: true,

for start with anther state just change currentstep.

    currentStep: 1,

for changing hedaer style just change classname

    classOnHeading : "wizard-heading",

-for changing btn text on next and previous button

    textOnNextbtn: "Next",
    textOnPreviousbtn: "Previous",

for changing the class name in buttons

    classNext: "btnss next",

    classPrevious: "btnss previous",

require dependency for animation

'react-transition-group'