{"id":22267500,"url":"https://github.com/json2d/react-sequence-wrapper","last_synced_at":"2026-02-04T07:04:18.529Z","repository":{"id":57344463,"uuid":"108686923","full_name":"json2d/react-sequence-wrapper","owner":"json2d","description":"a higher order component decorator providing state management for components that use a sequence of steps, like wizards and other multiple-step user interfaces.","archived":false,"fork":false,"pushed_at":"2017-10-28T22:24:38.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T02:52:02.211Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/json2d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-28T21:53:32.000Z","updated_at":"2018-02-21T01:43:09.000Z","dependencies_parsed_at":"2022-09-11T09:01:02.294Z","dependency_job_id":null,"html_url":"https://github.com/json2d/react-sequence-wrapper","commit_stats":null,"previous_names":["bitstrider/react-sequence-wrapper"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/json2d/react-sequence-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json2d%2Freact-sequence-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json2d%2Freact-sequence-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json2d%2Freact-sequence-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json2d%2Freact-sequence-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/json2d","download_url":"https://codeload.github.com/json2d/react-sequence-wrapper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json2d%2Freact-sequence-wrapper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264697567,"owners_count":23650955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-03T11:06:50.434Z","updated_at":"2026-02-04T07:04:18.459Z","avatar_url":"https://github.com/json2d.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-sequence-wrapper\n\na higher order component decorator providing state management for components that use a sequence of steps, like wizards and other multiple-step user interfaces.\n\n[![npm](https://img.shields.io/npm/v/react-sequence-wrapper.svg)](https://www.npmjs.com/package/react-sequence-wrapper)\n\n## Installation\n\n```sh\nnpm install react-sequence-wrapper --save-dev\n```\n\n## Usage\n\nHere'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:\n\n[![Edit react-sequence-wrapper@0.1.1](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6jqrp3o5wk?module=%2FWizard.js)\n\n```javascript\nimport React, { Component } from \"react\";\nimport { Label, Button } from \"react-bootstrap\";\nimport sequence from \"react-sequence-wrapper\";\n\n@sequence({\n  steps: [\"Greet\", \"Compliment\", \"Leave\"]\n})\nexport default class WizardForm extends Component {\n  render() {\n    const stepComponents = [\n      \u003cdiv\u003ehello world!\u003c/div\u003e,\n      \u003cdiv\u003enice shirt!\u003c/div\u003e,\n      \u003cdiv\u003egoodbye!\u003c/div\u003e\n    ];\n\n    const {\n      currentStepIndex,\n      currentStep,\n      nextStep,\n      prevStep,\n      setStepIndex,\n      setStep,\n      isFirstStep,\n      isLastStep,\n      steps\n    } = this.props; //all from @sequence\n    return (\n      \u003cdiv\u003e\n        \u003cdiv id=\"header\"\u003e\n          \u003ch2\u003e\n            \u003cLabel bsStyle=\"success\"\u003e\n              {currentStepIndex + 1}. {steps[currentStepIndex]}\n            \u003c/Label\u003e\n          \u003c/h2\u003e\n        \u003c/div\u003e\n\n        \u003cdiv id=\"step\"\u003e\n          {stepComponents[currentStepIndex]}\n        \u003c/div\u003e\n\n        \u003cdiv id=\"basic-navigation\"\u003e\n          \u003cButton onClick={prevStep} disabled={isFirstStep}\u003e\n            Back\n          \u003c/Button\u003e\n          \u003cButton bsStyle=\"primary\" onClick={nextStep} disabled={isLastStep}\u003e\n            Next\n          \u003c/Button\u003e\n        \u003c/div\u003e\n\n        \u003cdiv id=\"steps-navigation\"\u003e\n          \u003ch5\u003eSteps Navigator\u003c/h5\u003e\n\n          {steps.map((step, index) =\u003e (\n            \u003cButton\n              onClick={() =\u003e setStepIndex(index)}\n              disabled={currentStepIndex == index}\n              bsStyle={currentStepIndex == index ? \"success\" : \"default\"}\n            \u003e\n              {index + 1}.{step}\n            \u003c/Button\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\n\n## Dev Dependencies\n\n- [babel-cli](https://github.com/babel/babel/tree/master/packages): Babel command line.\n- [babel-core](https://github.com/babel/babel/tree/master/packages): Babel compiler core.\n- [babel-eslint](https://github.com/babel/babel-eslint): Custom parser for ESLint\n- [babel-preset-es2015](https://github.com/babel/babel/tree/master/packages): Babel preset for all es2015 plugins.\n- [babel-preset-react](https://github.com/babel/babel/tree/master/packages): Babel preset for all React plugins.\n- [babel-preset-stage-0](https://github.com/babel/babel/tree/master/packages): Babel preset for stage 0 plugins\n- [babel-register](https://github.com/babel/babel/tree/master/packages): babel require hook\n- [eslint](https://github.com/eslint/eslint): An AST-based pattern checker for JavaScript.\n- [eslint-config-rackt](https://github.com/rackt/eslint-config-rackt): Shareable eslint config for rackt repos\n- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react): React specific linting rules for ESLint\n- [react](https://github.com/facebook/react): React is a JavaScript library for building user interfaces.\n- [react-dom](https://github.com/facebook/react): React package for working with the DOM.\n- [rimraf](https://github.com/isaacs/rimraf): A deep deletion module for node (like `rm -rf`)\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson2d%2Freact-sequence-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjson2d%2Freact-sequence-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson2d%2Freact-sequence-wrapper/lists"}