Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    megawizardpublic

    MegaWizard

    React Wizard Component

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

    Features

    • 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.

    Limitations

    • 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

    Component props

    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.

    Step definition options

    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.

    Contrived Example:

    render() {
      let stepDef = Immutable.fromJS([
        {
          name: 'enterName',
          text: `Enter a name for widget ${this.state.widgetId}`,
          onEnter: this.props.hideWidgetList,
          nextValidator: this.state.nameInputText,
          display: () => {
            return (
              <div>
                <input type='text' value={this.state.nameText} onChange={this.handleInputChange} />
              </div>
            );
          },
        },
        {
          name: 'enterDescription',
          text: 'Enter a description',
          visible: this.state.descriptionRequired,
          nextValidator: this.state.descriptionText,
          display: () => {
            return (
              <DescriptionForm description={this.state.descriptionText}
                onChange={this.handleDescriptionChange} />
            );
          }
        },
        {
          name: 'confirm',
          text: 'Confirm',
          onExit: this.showWidgetList,
          display: () => {
            return (
              <div>
                Are you sure you want to use <strong>{this.state.nameText} - {this.state.descriptionText}</strong> for your widget?
              </div>
            );
          },
        },
      ]);
    
      return (
        <MegaWizard steps={stepDef} onStepChanged={this.handleStepChanged} onComplete={this.handleWizardComplete} />
      );
    }
    

    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.

    install

    npm i megawizard

    Downloadsweekly downloads

    2

    version

    0.3.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar