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:
;;; @ { const stepComponents = <div>hello world!</div> <div>nice shirt!</div> <div>goodbye!</div> ; const currentStepIndex currentStep nextStep prevStep setStepIndex setStep isFirstStep isLastStep steps } = thisprops; //all from @sequence return <div> <div id="header"> <h2> <Label bsStyle="success"> currentStepIndex + 1 stepscurrentStepIndex </Label> </h2> </div> <div id="step"> stepComponentscurrentStepIndex </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 </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