{"id":21894789,"url":"https://github.com/jonathanpalma/react-simple-step-wizard","last_synced_at":"2025-04-15T16:04:24.125Z","repository":{"id":35133631,"uuid":"192166857","full_name":"jonathanpalma/react-simple-step-wizard","owner":"jonathanpalma","description":"A simple and composable step wizard in React","archived":false,"fork":false,"pushed_at":"2023-01-05T10:49:47.000Z","size":3131,"stargazers_count":8,"open_issues_count":42,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-28T17:13:11.872Z","etag":null,"topics":["multipage","multistep","react","react-step-wizard","step-wizard","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"https://jonathanpalma.github.io/react-simple-step-wizard","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonathanpalma.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-16T08:18:20.000Z","updated_at":"2021-07-22T08:51:03.000Z","dependencies_parsed_at":"2023-01-15T14:30:09.038Z","dependency_job_id":null,"html_url":"https://github.com/jonathanpalma/react-simple-step-wizard","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanpalma%2Freact-simple-step-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanpalma%2Freact-simple-step-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanpalma%2Freact-simple-step-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanpalma%2Freact-simple-step-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonathanpalma","download_url":"https://codeload.github.com/jonathanpalma/react-simple-step-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226922420,"owners_count":17703773,"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":["multipage","multistep","react","react-step-wizard","step-wizard","wizard","wizard-steps"],"created_at":"2024-11-28T13:28:31.374Z","updated_at":"2024-11-28T13:28:32.050Z","avatar_url":"https://github.com/jonathanpalma.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003ereact-simple-step-wizard 🧙\u003c/h1\u003e\n\n  \u003cp\u003eA simple and composable step wizard in React! Made with ❤ in El Salvador 🇸🇻\u003c/p\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n[![Version][version-badge]][package]\n[![Build][build-badge]][build]\n[![Install Size][size-badge]][package-size]\n[![Downloads][downloads-badge]][npmcharts]\n[![PRs Welcome][prs-badge]][prs]\n[![Commitizen friendly][cz-badge]][cz]\n[![MIT License][license-badge]][license]\n\n[![Watch on GitHub][github-watch-badge]][github-watch]\n[![Star on GitHub][github-star-badge]][github-star]\n[![Tweet][twitter-badge]][twitter]\n\n## Demo\n\n[Click here](https://jonathanpalma.github.io/react-simple-step-wizard/) to see a live demo!\n\n## Getting Started\n\n### Installation\n\n```\nnpm install -S react-simple-step-wizard\n```\n\n### Usage\n\n```javascript\nimport Wizard from 'react-simple-step-wizard';\nimport React, { Component } from 'react';\n\nconst Step1 = () =\u003e \u003cdiv\u003eThis is Step 1\u003c/div\u003e;\nconst Step2 = () =\u003e \u003cdiv\u003eThis is Step 2\u003c/div\u003e;\nconst Step3 = () =\u003e \u003cdiv\u003eThis is Step 3\u003c/div\u003e;\nconst Step4 = () =\u003e \u003cdiv\u003eThis is Step 4\u003c/div\u003e;\nconst Step5 = () =\u003e \u003cdiv\u003eThis is Step 5\u003c/div\u003e;\nconst Step6 = () =\u003e \u003cdiv\u003eThis is Step 6\u003c/div\u003e;\nconst MyStepTracker = ({ currentStep = 0, steps = [] }) =\u003e (\n  \u003cdiv\u003e\n    \u003cp\u003eCurrent step is: {steps[currentStep]}\u003c/p\u003e\n  \u003c/div\u003e\n);\nconst MyNavigator = ({\n  getFirstStepProps,\n  getLastStepProps,\n  getNextStepProps,\n  getPrevStepProps,\n}) =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton type=\"button\" {...getFirstStepProps()}\u003e\n      \u0026lt;\u0026lt; First\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" {...getPrevStepProps()}\u003e\n      \u0026lt; Back\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" {...getNextStepProps()}\u003e\n      Next \u0026gt;\n    \u003c/button\u003e\n    \u003cbutton type=\"button\" {...getLastStepProps()}\u003e\n      Last \u0026gt;\u0026gt;\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n\nclass App extends Component {\n  state = { isCustomizeVisible: true };\n\n  handleStepChange = currentStep =\u003e {\n    console.log(currentStep);\n  };\n\n  onClick = () =\u003e {\n    this.setState(prevState =\u003e ({\n      isCustomizeVisible: !prevState.isCustomizeVisible,\n    }));\n  };\n\n  render() {\n    const { isCustomizeVisible } = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003ereact-simple-step-wizard demo\u003c/h1\u003e\n        \u003cdiv\u003e\n          \u003cp\u003eStep 3 visible: {isCustomizeVisible.toString()}\u003c/p\u003e\n          \u003cbutton type=\"button\" onClick={this.onClick}\u003e\n            Toggle Step 3\n          \u003c/button\u003e\n        \u003c/div\u003e\n        \u003cWizard onStepChange={this.handleStepChange}\u003e\n          \u003cWizard.StepTracker /\u003e\n          \u003cWizard.Steps\u003e\n            \u003cStep1 stepLabel=\"Search\" /\u003e\n            \u003cStep2 stepLabel=\"Select\" /\u003e\n            \u003cStep3 stepLabel=\"Customize\" stepCondition={isCustomizeVisible} /\u003e\n            \u003cStep4 stepLabel=\"Review\" /\u003e\n            \u003cWizard.StepGroup stepLabel=\"Submit\"\u003e\n              \u003cStep5 /\u003e\n              \u003cStep6 /\u003e\n            \u003c/Wizard.StepGroup\u003e\n          \u003c/Wizard.Steps\u003e\n          {/* You can implement your custom components via render-props */}\n          \u003cWizard.StepTracker\u003e\n            {stepTrackerProps =\u003e \u003cMyStepTracker {...stepTrackerProps} /\u003e}\n          \u003c/Wizard.StepTracker\u003e\n          \u003cWizard.Navigator\u003e\n            {navigatorProps =\u003e \u003cMyNavigator {...navigatorProps} /\u003e}\n          \u003c/Wizard.Navigator\u003e\n        \u003c/Wizard\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## Roadmap\n\n### V1\n\nProvide an accessible and composable API to be used with older react versions that don't support hooks.\n\n### V2\n\nRewrite lib core and expose some of the APIs using react hooks.\n\n## License\n\nMIT © [jonathanpalma](https://github.com/jonathanpalma)\n\n[downloads-badge]: https://img.shields.io/npm/dm/react-simple-step-wizard.svg?style=flat-square\n[license-badge]: https://img.shields.io/npm/l/react-simple-step-wizard.svg?style=flat-square\n[license]: https://github.com/jonathanpalma/react-simple-step-wizard/blob/master/LICENSE\n[npmcharts]: http://npmcharts.com/compare/react-simple-step-wizard\n[package-size]: https://packagephobia.now.sh/result?p=react-simple-step-wizard\n[package]: https://www.npmjs.com/package/react-simple-step-wizard\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[build-badge]: https://img.shields.io/circleci/build/gh/jonathanpalma/react-simple-step-wizard?style=flat-square\n[build]: https://circleci.com/gh/jonathanpalma/react-simple-step-wizard\n[cz-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\n[cz]: http://commitizen.github.io/cz-cli/\n[size-badge]: https://flat.badgen.net/packagephobia/install/react-simple-step-wizard\n[version-badge]: https://img.shields.io/npm/v/react-simple-step-wizard.svg?style=flat-square\n[github-watch-badge]: https://img.shields.io/github/watchers/jonathanpalma/react-simple-step-wizard.svg?style=social\n[github-watch]: https://github.com/jonathanpalma/react-simple-step-wizard/watchers\n[github-star-badge]: https://img.shields.io/github/stars/jonathanpalma/react-simple-step-wizard.svg?style=social\n[github-star]: https://github.com/jonathanpalma/react-simple-step-wizard/stargazers\n[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-simple-step-wizard!%20https://github.com/jonathanpalma/react-simple-step-wizard\n[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/jonathanpalma/react-simple-step-wizard.svg?style=social\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanpalma%2Freact-simple-step-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonathanpalma%2Freact-simple-step-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanpalma%2Freact-simple-step-wizard/lists"}