MegaWizard

React Wizard Component

MegaWizard is a React component for easily making step-by-step wizards without having to configure ten thousand seperate props..

$3

- Super flexibile configuration via a step definition object.
- Easily embed React components or HTML elements.
- Optional step validators to prevent advancement until your conditions are met.
- Optional visibility flag for dynamically hiding/display steps.
- Execution hooks for entering and leaving steps
- Step display summary and completed step indications.
- Super fast rendering that works on both client and server.
- Only renders markup for currently displayed steps.
- Best name ever for a wizard.

$3

- Relies on Bootstrap for styling and layout
- No way to customize step summary

If you are interested in helping with any of this, I would gladly take pull requests.

Using it

To use MegaWizard:
- Install the component through NPM
- Require it
- Create step definition object and pass it to MegaWizard

$3

MegaWizard has the following component props:

#### Required:
steps - step definition object

#### Optional
onStepChanged(currentStep) - function to call after a step is changed. Argument is the current step. Called before onEnter and onExit hooks.

onStepWillChange(currentStep) - function to call before a step is changed. Argument is the current step.

onComplete() - function to call when complete button is clicked on last step. No arguments. Called before onExit hook.

prevButtonText - global text override to display for previous button. Default is "Previous".

nextButtonText - global text override to display for next button. Default is "Next".

completeButtonText - global text override to display for complete button. Default is "Done".

prevButtonClasses - global class override for previous button. If using, you must handle horizontal positioning yourself.

nextButtonClasses - global class override for next button. If using, you must handle horizontal positioning yourself.

completeButtonClasses - global class override for complete button. If using, you must handle horizontal positioning yourself.

$3

Steps definitions are a flexible way to get some fairly complex behaviors into the wizard. Since each step is defined indepentently, you can drive wizard behavior by using state/props from outisde the wizard. Step definitions may have any combination of the following options:

#### Required:
name - unique indentifier for step

text - display name (shown on sidebar and header)

#### Optional
onEnter - function to call when entering this step (fires when entering steps via next or previous movement). No arguments.

onExit - function to call when exiting this step (fires when leaving steps via next or previous movement). No arguments.

visible - entire step is hidden if this is defined and false. May truthy, falsy, or bool.

nextValidator - next button is disabled if this is defined and false. May truthy, falsy, or bool.

prevValidator - previous button is disabled if this is defined and false. May truthy, falsy, or bool.

prevButtonText - text to display for previous button. Default is "Previous".

nextButtonText - text to display for next button. Default is "Next".

completeButtonText - text to display for complete button. Default is "Done".

prevButtonClasses - class overrides for previous button. If using, you must handle horizontal positioning yourself.

nextButtonClasses - class overrides for next button. If using, you must handle horizontal positioning yourself.

completeButtonClasses - class overrides for complete button. If using, you must handle horizontal positioning yourself.

display - React element to display when step is active.

$3

render() {
let stepDef = fromJS([
{
name: 'enterName',
text: Enter a name for widget ${this.state.widgetId},
onEnter: this.props.hideWidgetList,
nextValidator: this.state.nameInputText,
display: () => {
return (

);
},
},
{
name: 'enterDescription',
text: 'Enter a description',
visible: this.state.descriptionRequired,
nextValidator: this.state.descriptionText,
display: () => {
return (
onChange={this.handleDescriptionChange} />
);
}
},
{
name: 'confirm',
text: 'Confirm',
onExit: this.showWidgetList,
display: () => {
return (

Are you sure you want to use {this.state.nameText} - {this.state.descriptionText} for your widget?

);
},
},
]);

return (

);
}

Contributing

First, setup your local environment:

git clone git@github.com:ZeroarcSoftware/megawizard.git
cd megawizard
npm install

Next, build the project (for use in a npm link scenario):

npm run build

To watch for changes:

npm run watch

Issues

Issues are tracked in Github Issues.

Changes

Changes are tracked as Github Releases.