Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/json2d/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.
https://github.com/json2d/react-sequence-wrapper
Last synced: about 1 month ago
JSON representation
a higher order component decorator providing state management for components that use a sequence of steps, like wizards and other multiple-step user interfaces.
- Host: GitHub
- URL: https://github.com/json2d/react-sequence-wrapper
- Owner: json2d
- Created: 2017-10-28T21:53:32.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-28T22:24:38.000Z (about 7 years ago)
- Last Synced: 2024-04-25T02:41:37.167Z (9 months ago)
- Size: 3.91 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
[](https://www.npmjs.com/package/react-sequence-wrapper)
## Installation
```sh
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:
[![Edit [email protected]](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6jqrp3o5wk?module=%2FWizard.js)
```javascript
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 = [
hello world!,
nice shirt!,
goodbye!
];
const {
currentStepIndex,
currentStep,
nextStep,
prevStep,
setStepIndex,
setStep,
isFirstStep,
isLastStep,
steps
} = this.props; //all from @sequence
return (
{currentStepIndex + 1}. {steps[currentStepIndex]}
{stepComponents[currentStepIndex]}
Back
Next
Steps Navigator
{steps.map((step, index) => (
setStepIndex(index)}
disabled={currentStepIndex == index}
bsStyle={currentStepIndex == index ? "success" : "default"}
>
{index + 1}.{step}
))}
);
}
}
```
## Dev Dependencies
- [babel-cli](https://github.com/babel/babel/tree/master/packages): Babel command line.
- [babel-core](https://github.com/babel/babel/tree/master/packages): Babel compiler core.
- [babel-eslint](https://github.com/babel/babel-eslint): Custom parser for ESLint
- [babel-preset-es2015](https://github.com/babel/babel/tree/master/packages): Babel preset for all es2015 plugins.
- [babel-preset-react](https://github.com/babel/babel/tree/master/packages): Babel preset for all React plugins.
- [babel-preset-stage-0](https://github.com/babel/babel/tree/master/packages): Babel preset for stage 0 plugins
- [babel-register](https://github.com/babel/babel/tree/master/packages): babel require hook
- [eslint](https://github.com/eslint/eslint): An AST-based pattern checker for JavaScript.
- [eslint-config-rackt](https://github.com/rackt/eslint-config-rackt): Shareable eslint config for rackt repos
- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react): React specific linting rules for ESLint
- [react](https://github.com/facebook/react): React is a JavaScript library for building user interfaces.
- [react-dom](https://github.com/facebook/react): React package for working with the DOM.
- [rimraf](https://github.com/isaacs/rimraf): A deep deletion module for node (like `rm -rf`)
## License
MIT