{"id":21667708,"url":"https://github.com/alan2207/react-multistep-wizard","last_synced_at":"2025-06-21T22:41:48.937Z","repository":{"id":35053548,"uuid":"201123278","full_name":"alan2207/react-multistep-wizard","owner":"alan2207","description":"🧙 React wizard component","archived":false,"fork":false,"pushed_at":"2022-12-11T01:12:56.000Z","size":768,"stargazers_count":12,"open_issues_count":35,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-13T02:05:01.857Z","etag":null,"topics":["compound-components","context-api","multistep","react","render-props","wizard","wizard-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/alan2207.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":"2019-08-07T20:29:39.000Z","updated_at":"2025-04-27T21:55:14.000Z","dependencies_parsed_at":"2023-01-15T13:01:05.222Z","dependency_job_id":null,"html_url":"https://github.com/alan2207/react-multistep-wizard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alan2207/react-multistep-wizard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-multistep-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-multistep-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-multistep-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-multistep-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan2207","download_url":"https://codeload.github.com/alan2207/react-multistep-wizard/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Freact-multistep-wizard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261205690,"owners_count":23124813,"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":["compound-components","context-api","multistep","react","render-props","wizard","wizard-component"],"created_at":"2024-11-25T11:46:26.996Z","updated_at":"2025-06-21T22:41:43.924Z","avatar_url":"https://github.com/alan2207.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-multistep-wizard\n\n\u003e React wizard component\n\n[![NPM](https://img.shields.io/npm/v/react-multistep-wizard.svg)](https://www.npmjs.com/package/react-multistep-wizard)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save react-multistep-wizard\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\n\nimport { Wizard, Steps, Step } from 'react-multistep-wizard';\n\n// simple example:\nclass Example extends React.Component {\n  render() {\n    return (\n      \u003cWizard\u003e\n        \u003cSteps\u003e\n          \u003cStep\u003e\n            {ctx =\u003e (\n              \u003cdiv\u003e\n                Step 1: \u003cbutton onClick={ctx.next}\u003eNext Step\u003c/button\u003e\n              \u003c/div\u003e\n            )}\n          \u003c/Step\u003e\n          \u003cStep\u003e\n            {ctx =\u003e (\n              \u003cdiv\u003e\n                Step 2: \u003cbutton onClick={ctx.next}\u003eNext Step\u003c/button\u003e\n              \u003c/div\u003e\n            )}\n          \u003c/Step\u003e\n        \u003c/Steps\u003e\n      \u003c/Wizard\u003e\n    );\n  }\n}\n```\n\n[Live Demo](https://codesandbox.io/s/mystifying-frog-wpdrk)\n\n## API\n\n## Exports:\n\n### Components:\n\n#### `Wizard`\n\nComponent that controls the entire state of the component.\n\n##### props:\n\n- `safe` - keeps the app from breaking on attempts to go to non existing steps.\n- `onChange` - function triggered on change.\n- `startStep` - choose from which step to start the wizard. Defaults to 1.\n- `externalOverrides` - use it for the external control of the component, for\n  example if you want the wizard component to be controlled from an external\n  source.\n\n```\n\u003cWizard\n  safe={false}\n  onChange={console.log}\n  startStep={1}\n  externalOverrides={{\n    currentStep: externalCurrentStep,\n    next: externalNextFn,\n    previous: externalPreviousFn,\n    jump: externalJumpFn\n  }}\n\u003e{...}\u003c/Wizard\u003e\n```\n\n#### `Steps`\n\nComponent that controls the rendering of the current step. Doesn't accept any\nprops, and must have the `Step` components as children.\n\n#### `useWizard`\n\nHook that exposes the entire Wizard component state to consumer components.\n\n#### `Step`\n\nComponent that describes the actual step. By using render prop function, it can\npass the wizard's context to the UI in order to allow user to control it from\nwithin it.\n\nRender prop options from `WizardContext`:\n\n- `currentStep`\n- `totalSteps`\n- `previous`\n- `next`\n- `jump`\n- `init`\n\n#### `WithWizard`\n\nComponent similar to `Step`. The only difference is that it should not be\nrendered from the `Steps` component, that way making sure it is always rendered\nregardless of the current step. Convenient for progress indicators.\n\n### TypeScript Types:\n\n#### `WizardProps`\n\n#### `WizardContextState`\n\nFor more info check out the example folder or the live demo.\n\n## License\n\nMIT © [alan2207](https://github.com/alan2207)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Freact-multistep-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan2207%2Freact-multistep-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Freact-multistep-wizard/lists"}