Package Exports

react-sequence-wrapper

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-sequence-wrapper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-sequence-wrapper

a higher order component decorator providing state management for components that use a sequence of steps, like wizards and other multiple-step user interfaces.

Installation

npm install react-sequence-wrapper --save-dev

Usage

Here's an example of using sequence decorator with the steps option to wrap a component and provide it with props to implement a basic wizard with forward and backwards navigation:

import React, { Component } from "react";
import { Label, Button } from "react-bootstrap";
import sequence from "react-sequence-wrapper";

@sequence({
  steps: ["Greet", "Compliment", "Leave"]
})
export default class WizardForm extends Component {
  render() {
    const stepComponents = [
      <div>hello world!</div>,
      <div>nice shirt!</div>,
      <div>goodbye!</div>
    ];

    const {
      currentStepIndex,
      currentStep,
      nextStep,
      prevStep,
      setStepIndex,
      setStep,
      isFirstStep,
      isLastStep,
      steps
    } = this.props; //all from @sequence
    return (
      <div>
        <div id="header">
          <h2>
            <Label bsStyle="success">
              {currentStepIndex + 1}. {steps[currentStepIndex]}
            </Label>
          </h2>
        </div>

        <div id="step">
          {stepComponents[currentStepIndex]}
        </div>

        <div id="basic-navigation">
          <Button onClick={prevStep} disabled={isFirstStep}>
            Back
          </Button>
          <Button bsStyle="primary" onClick={nextStep} disabled={isLastStep}>
            Next
          </Button>
        </div>

        <div id="steps-navigation">
          <h5>Steps Navigator</h5>

          {steps.map((step, index) => (
            <Button
              onClick={() => setStepIndex(index)}
              disabled={currentStepIndex == index}
              bsStyle={currentStepIndex == index ? "success" : "default"}
            >
              {index + 1}.{step}
            </Button>
          ))}
        </div>
      </div>
    );
  }
}

Dev Dependencies

babel-cli: Babel command line.
babel-core: Babel compiler core.
babel-eslint: Custom parser for ESLint
babel-preset-es2015: Babel preset for all es2015 plugins.
babel-preset-react: Babel preset for all React plugins.
babel-preset-stage-0: Babel preset for stage 0 plugins
babel-register: babel require hook
eslint: An AST-based pattern checker for JavaScript.
eslint-config-rackt: Shareable eslint config for rackt repos
eslint-plugin-react: React specific linting rules for ESLint
react: React is a JavaScript library for building user interfaces.
react-dom: React package for working with the DOM.
rimraf: A deep deletion module for node (like rm -rf)

License

MIT