{"id":20014679,"url":"https://github.com/willmendesneto/react-sweet-wizard","last_synced_at":"2026-04-08T14:31:04.777Z","repository":{"id":46309355,"uuid":"422319053","full_name":"willmendesneto/react-sweet-wizard","owner":"willmendesneto","description":"Your module to handle with Form Wizards in ReactJS applications easier.","archived":false,"fork":false,"pushed_at":"2025-04-02T23:51:12.000Z","size":966,"stargazers_count":27,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-22T00:27:27.613Z","etag":null,"topics":["form","hacktoberfest","hooks","react","stepper","wizard","wizard-component","wizard-steps"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/willmendesneto.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-28T18:45:14.000Z","updated_at":"2025-04-02T23:51:15.000Z","dependencies_parsed_at":"2022-08-29T20:21:21.041Z","dependency_job_id":"eee2a9ee-c593-4293-97ec-fa79fdc034b2","html_url":"https://github.com/willmendesneto/react-sweet-wizard","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"f5356ca8f76543bc4f6d0f3db3ef007180a2e7cf"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/willmendesneto/react-sweet-wizard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freact-sweet-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freact-sweet-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freact-sweet-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freact-sweet-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willmendesneto","download_url":"https://codeload.github.com/willmendesneto/react-sweet-wizard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willmendesneto%2Freact-sweet-wizard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31559660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["form","hacktoberfest","hooks","react","stepper","wizard","wizard-component","wizard-steps"],"created_at":"2024-11-13T07:43:27.534Z","updated_at":"2026-04-08T14:31:04.753Z","avatar_url":"https://github.com/willmendesneto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Sweet Wizard\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/willmendesneto/react-sweet-wizard.svg)](https://greenkeeper.io/)\n[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/react-sweet-wizard-sample)\n\n[![npm version](https://badge.fury.io/js/react-sweet-wizard.svg)](http://badge.fury.io/js/react-sweet-wizard) [![npm downloads](https://img.shields.io/npm/dm/react-sweet-wizard.svg)](https://npmjs.org/react-sweet-wizard)\n\n[![Coverage Status](https://coveralls.io/repos/github/willmendesneto/react-sweet-wizard/badge.svg?branch=main)](https://coveralls.io/github/willmendesneto/react-sweet-wizard?branch=main) [![Build Status](https://circleci.com/gh/willmendesneto/react-sweet-wizard.svg?style=shield)](https://circleci.com/gh/willmendesneto/react-sweet-wizard)\n\nYour module to handle with Form Wizards in ReactJS applications easier.\n\n## Why you shoud use React Sweet Wizard\n\nWell, there are several selling points, actually!\n\n- 🤘 Full Typescript support: It embraces Typescript for real! It accepts interfaces and types as generics for their data structures and more!\n- 🏆 Better Developer Experience (DX): It enforces some conventions in order to make sure we got you covered! Issues with things such as specific components that needs to be used, which component is incorrect and context that needs to be used as wrapper will be raised straightaway on development environment.\n- 🎯 Covers different usage and scenarios: It covers simple usage, but also covers scenarios when you have steps being added dinamically, specific validation steps that needs to be added, data structures that should be passed on, etc. The sky is the limit here!\n- 🤩 No external dependencies: And that's exactly what you read. This is a zero-dependencies package, so you can integrate with Material-UI, Chakra-UI or any other Design System you might be using - including your own. Feel free to integrate with your workflow as you wish\n- 🗜 Small bundle: All of that in only 1.58KB\n\n---\n\n- [Install](#install)\n- [Setup](#setup)\n- [Demo](#demo)\n- [useWizardContext](#usewizardcontext)\n- [Publish](#publish)\n\n## Install\n\nYou can get it on NPM installing `react-sweet-wizard` module as a project dependency.\n\n```shell\nnpm install react-sweet-wizard --save\n# or\nyarn add react-sweet-wizard\n```\n\nYou can also use the standalone UMD build by including `dist/react-sweet-wizard.js` in your page. If you do this you'll also need to include the dependencies. For example:\n\n```html\n\u003cscript src=\"https://unpkg.com/react@\u003cpackage-version\u003e\u003c/package-version\u003e/dist/react.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom@\u003cpackage-version\u003e/dist/react-dom.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-sweet-wizard/dist/umd/react-sweet-wizard.js\"\u003e\u003c/script\u003e\n```\n\n## Setup\n\nYou'll need to import `WizardProvider` and add it into the root component of your application. So that you can create your wizard steps by using `Steps`, `Step` and control them via `useWizardContext` hook.\n\n```javascript\nimport {\n  useWizardContext,\n  WizardProvider,\n  Steps,\n  Step,\n} from 'react-sweet-wizard';\n\nconst Progress = () =\u003e {\n  const { activeStepIndex, steps } = useWizardContext();\n\n  return (\n    \u003cdiv\u003e\n      State {activeStepIndex + 1} of {steps.length}\n    \u003c/div\u003e\n  );\n};\n\nconst WizardSteps = () =\u003e (\n  \u003cSteps\u003e\n    \u003cStep key=\"0\" id=\"0\"\u003e\n      \u003cdiv\u003e\n        \u003cp\u003estep 1\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/Step\u003e\n    \u003cStep key=\"1\" id=\"1\"\u003e\n      \u003cdiv\u003e\n        \u003cp\u003estep 2\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/Step\u003e\n    {/* 🎉 For better DX, `\u003cStep /\u003e` component can also have `id` as strings 🎉 */}\n    \u003cStep key=\"step3\" id=\"step3\"\u003e\n      \u003cdiv\u003e\n        \u003cp\u003estep 3\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/Step\u003e\n  \u003c/Steps\u003e\n);\n\nconst App = () =\u003e (\n  \u003cWizardProvider\u003e\n    \u003cProgress /\u003e\n    \u003cWizardSteps /\u003e\n  \u003c/WizardProvider\u003e\n);\n\nexport default App;\n```\n\n# Demo\n\nTry out the demo on Stackblitz!\n\n[React Sweet Wizard Playground](https://stackblitz.com/edit/react-sweet-wizard-sample)!\n\n### Run the tests\n\n```bash\n$ npm test\n```\n\n### Run the build\n\n```bash\n$ npm run build\n```\n\n### Run the bundlesize check\n\n```bash\n$ npm run bundlesize\n```\n\n### Run the code lint\n\n```bash\n$ npm run lint\n```\n\n## `useWizardContext`\n\nThis package exposes a hook with a few different methods which you can interact.\n\n### Using Generics for data structure steps\n\nThe hook accepts a generic as data structure. If you don't pass anything, it will use `DefaultWizardStepProps` as default one. Otherwise, it will use the one you defined.\n\n\u003e To define a new interface and pass as a generic you should extends from `DefaultWizardStepProps`\n\n```tsx\nimport { useWizardContext, DefaultWizardStepProps } from 'react-sweet-wizard';\n...\n// Creating a data structure interface\n// To be used for steps\ninterface MyWizardSteps extends DefaultWizardStepProps {\n  name: string;\n};\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst ctx = useWizardContext\u003cMyWizardSteps\u003e();\n// ✨ where the magic happens ✨\n```\n\n### Read-only values\n\n- `steps`: You can check how many steps are available on the wizard. Interesting to be used if you're adding dynamic nodes, as an example\n- `activeStepIndex`: A number referencing which step is visible on your wizard\n- `isFirstStep`: A boolean that can be used to check if the current step is the first one on your wizard\n- `isLastStep`: A boolean that can be used to check if the current step is the last one on your wizard\n\n### `setSteps(steps: T[])`\n\nSets a new value for steps to be used and accessed across components. It covers scenarios such as steps with complex data structures.\nIt will use the defined Generic interface for it. Otherwise, it follows `DefaultWizardStepProps` interface.\n\n```tsx\n\nimport { useWizardContext, DefaultWizardStepProps } from 'react-sweet-wizard';\n\n// Creating a data structure interface\n// To be used for steps\ninterface MyWizardSteps extends DefaultWizardStepProps {\n  name: string;\n};\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst { setSteps } = useWizardContext\u003cMyWizardSteps\u003e();\n// Updating the mapped steps\nsetSteps([\n  { id: 0, name: 'first'},\n  { id: 1, name: 'second'},\n  { id: 'step3', name: 'third'},\n]);\n...\n```\n\n### `getActiveStep()`\n\nReturns a data structure value for the current step to be used and accessed across components. It covers scenarios such as steps with complex data structures.\n\nIt will use the defined Generic interface for it. Otherwise, it follows `DefaultWizardStepProps` interface.\n\n```tsx\nimport { useWizardContext } from 'react-sweet-wizard';\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst { getActiveStep, onNext } = useWizardContext();\n// Adding 3 steps\nsetSteps([\n  { id: 0 },\n  { id: 1 },\n  { id: 'step3' },\n]);\n// Returns the first step since the wizard is following the common flow\n//   { id: 0 }\ngetActiveStep();\n// Moving wizard to the second step\nonNext();\n// Returns the second step\n//   { id: 1 }\ngetActiveStep();\n...\n```\n\n### `onNext(cb?: () =\u003e void)`\n\nMoves the wizard to the next step. It also accepts a callback, in case you need to manage any specific handler. E.G.\n\n```tsx\nimport { useWizardContext } from 'react-sweet-wizard';\n// Creating a data structure interface\n// To be used for steps\ninterface MyWizardSteps extends DefaultWizardStepProps {\n  name: string;\n};\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst { setSteps, onNext } = useWizardContext\u003cMyWizardSteps\u003e();\n...\n// Adding 3 steps\nsetSteps([\n  { id: 0, name: 'first'},\n  { id: 1, name: 'second'},\n  { id: 'step3', name: 'third'},\n]);\n// Moving wizard to the second step\nonNext();\nonNext(() =\u003e {\n  alert('And here we go! 🚀');\n  // You can add a specific validation here!\n});\n```\n\n### `onPrevious()`\n\nMoves the wizard to the previous step.\n\n```tsx\nimport { useWizardContext } from 'react-sweet-wizard';\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst { setSteps, onPrevious } = useWizardContext();\n...\n// Adding 2 steps\nsetSteps([\n  { id: 0},\n  { id: 1},\n]);\n// Moving wizard to the second step\nonNext();\n// Moving wizard back to the first step\nonPrevious();\n```\n\n### `goTo(id: number | string)`\n\nMoves the wizard to a specific step. Interesting if you have some advanced scenario\n\n```tsx\nimport { useWizardContext, DefaultWizardStepProps } from 'react-sweet-wizard';\n\n// Creating a data structure interface\n// To be used for steps\ninterface MyWizardSteps extends DefaultWizardStepProps {\n  name: string;\n};\n...\n// Yay! You can use generics to enforce the data structure\n// used for steps\nconst { setSteps, goTo, getActiveStep } = useWizardContext\u003cMyWizardSteps\u003e();\n...\n// Updating the mapped steps\nsetSteps([\n  { id: 0, name: 'first'},\n  { id: 1, name: 'second'},\n  { id: 'step3', name: 'third'},\n]);\n// Moving wizard to second step\ngoTo(1);\n// Output\n//   { id: 1, name: 'second'}\n// It's using `MyWizardSteps` interface, so don't worry\nconsole.log(getActiveStep());\n// Moving wizard to third step\ngoTo('step3');\n// Output\n//   { id: 'step3', name: 'third'}\nconsole.log(getActiveStep());\n```\n\n## Publish\n\nthis project is using `np` package to publish, which makes things straightforward. EX: `np \u003cpatch|minor|major\u003e`\n\n\u003e For more details, [please check np package on npmjs.com](https://www.npmjs.com/package/np)\n\n## Author\n\n**Wilson Mendes (willmendesneto)**\n\n- \u003chttp://github.com/willmendesneto\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Freact-sweet-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillmendesneto%2Freact-sweet-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillmendesneto%2Freact-sweet-wizard/lists"}