{"id":15296028,"url":"https://github.com/devrnt/react-use-wizard","last_synced_at":"2025-05-14T07:08:27.654Z","repository":{"id":37133051,"uuid":"325550710","full_name":"devrnt/react-use-wizard","owner":"devrnt","description":"🧙 A React wizard (stepper) builder without the hassle, powered by hooks.","archived":false,"fork":false,"pushed_at":"2025-04-30T06:09:03.000Z","size":9219,"stargazers_count":644,"open_issues_count":8,"forks_count":43,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-30T07:19:47.105Z","etag":null,"topics":["async","hook","hooks","javascript","react","react-hooks","react-stepper","react-use","react-use-stepper","react-use-wizard","react-wizard","reactjs","stepper","typescript","wizard"],"latest_commit_sha":null,"homepage":"https://devrnt.github.io/react-use-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/devrnt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-12-30T12:55:08.000Z","updated_at":"2025-04-30T06:08:03.000Z","dependencies_parsed_at":"2024-06-18T15:19:57.736Z","dependency_job_id":"03e1966b-b127-42ff-91fe-b5ea35a46440","html_url":"https://github.com/devrnt/react-use-wizard","commit_stats":{"total_commits":277,"total_committers":12,"mean_commits":"23.083333333333332","dds":0.3646209386281588,"last_synced_commit":"eacb20947fbb2e5c5d97f3e4fb5fdd970c20b89f"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devrnt%2Freact-use-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devrnt%2Freact-use-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devrnt%2Freact-use-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devrnt%2Freact-use-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devrnt","download_url":"https://codeload.github.com/devrnt/react-use-wizard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092776,"owners_count":22013290,"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":["async","hook","hooks","javascript","react","react-hooks","react-stepper","react-use","react-use-stepper","react-use-wizard","react-wizard","reactjs","stepper","typescript","wizard"],"created_at":"2024-09-30T18:09:00.831Z","updated_at":"2025-05-14T07:08:27.629Z","avatar_url":"https://github.com/devrnt.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/devrnt/react-use-wizard/master/assets/logo.svg\" alt=\"react-use-wizard logo\" height=\"120px\" style=\"margin-top: 20px;\"/\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003ereact-use-wizard\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA React wizard (stepper) builder without the hassle, powered by hooks.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"ci\" src=\"https://github.com/devrnt/react-use-wizard/workflows/CI/badge.svg?branch=main\"\u003e\n\u003cimg alt=\"version\" src=\"https://img.shields.io/npm/v/react-use-wizard.svg\" /\u003e\n\u003cimg alt=\"downloads\" src=\"https://badgen.net/npm/dw/react-use-wizard\" /\u003e\n\u003cimg alt=\"minzipped size\" src=\"https://badgen.net/bundlephobia/minzip/react-use-wizard\"\u003e\n\u003cimg alt=\"known vulnerabilities\" src=\"https://snyk.io/test/github/devrnt/react-use-wizard/badge.svg\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Simplicity\n- Focused on logic\n- Zero dependencies\n- No UI restrictions\n- [Tiny size](https://bundlephobia.com/result?p=react-use-wizard@latest)\n- Written in TypeScript\n\n## Installation\n\n```\nyarn add react-use-wizard\n```\n\n## Quickstart\n\n```js\nimport * as React from 'react';\n\nimport { Wizard, useWizard } from 'react-use-wizard';\n\nconst App = () =\u003e (\n  \u003cWizard\u003e\n    \u003cStep1 /\u003e\n    \u003cStep2 /\u003e\n    \u003cStep3 /\u003e\n  \u003c/Wizard\u003e\n);\n\nconst Step1 = () =\u003e {\n  const { handleStep, previousStep, nextStep } = useWizard();\n\n  // Attach an optional handler\n  handleStep(() =\u003e {\n    alert('Going to step 2');\n  });\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={() =\u003e previousStep()}\u003ePrevious ⏮️\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e nextStep()}\u003eNext ⏭\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n## Links\n\n- [API](#api)\n- [Playground](#playground)\n- [Examples](#examples)\n- [Async](#async)\n- [Animation](#animation)\n- [IE11](#ie11)\n\n## API\n\n- [Wizard](#wizard)\n- [useWizard](#usewizard)\n\n### Wizard\n\n`Wizard` is used to wrap your steps. Each child component will be treated as an individual step. You can pass a shared `footer` and `header` component that should always be in your steps.\n\nExample: pass a footer component that contains a \"previous\" and \"next\" button to the wizard.\n\n#### Props\n\n| name       | type            | description                                                | required | default |\n| ---------- | --------------- | ---------------------------------------------------------- | -------- | ------- |\n| startIndex | number          | Indicate the wizard to start at the given step             | ❌       | 0       |\n| header     | React.ReactNode | Header that is shown above the active step                 | ❌       |         |\n| footer     | React.ReactNode | Footer that is shown below the active stepstep             | ❌       |         |\n| onStepChange     | (stepIndex) | Callback that will be invoked with the new step index when the wizard changes steps             | ❌       |         |\n  | wrapper  | React.React.ReactElement | Optional wrapper that is exclusively wrapped around the active step component. It is not wrapped around the `header` and `footer`             | ❌       |         |\n| children   | React.ReactNode | Each child component will be treated as an individual step | ✔️       |\n\n#### Example\n\n```javascript\n// Example: show the active step in the header\nconst Header = () =\u003e \u003cp\u003eI am the header component\u003c/p\u003e;\n\n// Example: show the \"previous\" and \"next\" buttons in the footer\nconst Footer = () =\u003e \u003cp\u003eI am the footer component\u003c/p\u003e;\n\n// Example: Wrap steps in an `\u003cAnimatePresence` from framer-motion \nconst Wrapper = () =\u003e \u003cAnimatePresence exitBeforeEnter /\u003e;\n\nconst App = () =\u003e {\n  return (\n    \u003cWizard \n        startIndex={0}\n        header={\u003cHeader /\u003e}\n        footer={\u003cFooter /\u003e}\n        wrapper={\u003cWrapper /\u003e}\n      \u003e\n      \u003cStep1 /\u003e\n      \u003cStep2 /\u003e\n      \u003cStep3 /\u003e\n    \u003c/Wizard\u003e\n  );\n};\n```\n\n### useWizard\n\nUsed to retrieve all methods and properties related to your wizard. Make sure `Wizard` is wrapped around your component when calling `useWizard`.\n\n`handleStep` is used to attach a handler to the step, can either be `async` or a `sync` function. This function will be invoked when calling `nextStep`.\n\n**Remark** - You can't use `useWizard` in the same component where `Wizard` is used.\n\n#### Methods\n\n| name         | type                        | description                                                                                                                                              |\n| ------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| nextStep     | () =\u003e Promise\u003cvoid\u003e         | Go to the next step                                                                                                                                      |\n| previousStep | () =\u003e void                  | Go to the previous step index                                                                                                                            |\n| goToStep     | (stepIndex: number) =\u003e void | Go to the given step index                                                                                                                               |\n| handleStep   | (handler: Handler) =\u003e void  | Attach a callback that will be called when calling `nextStep`. `handler` can be either sync or async                                                     |\n| isLoading    | boolean                     | \\* Will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected |\n| activeStep   | number                      | The current active step of the wizard                                                                                                                    |\n| stepCount    | number                      | The total number of steps of the wizard                                                                                                                  |\n| isFirstStep  | boolean                     | Indicate if the current step is the first step (aka no previous step)                                                                                    |\n| isLastStep   | boolean                     | Indicate if the current step is the last step (aka no next step)                                                                                         |\n|              |\n\n#### Example\n\n```javascript\nimport * as React from 'react';\n\nimport { Wizard, useWizard } from 'react-use-wizard';\n\nconst App = () =\u003e (\n  \u003cWizard\u003e\n    \u003cStep1 /\u003e\n    \u003cStep2 /\u003e\n    \u003cStep3 /\u003e\n  \u003c/Wizard\u003e\n);\n\nconst Step1 = () =\u003e {\n  const {\n    isLoading,\n    isLastStep,\n    isFirstStep,\n    activeStep,\n    stepCount,\n    previousStep,\n    nextStep,\n    goToStep,\n    handleStep,\n  } = useWizard();\n\n  // This handler is optional\n  handleStep(() =\u003e {\n    alert('Going to step 2');\n  });\n\n  return (\n    \u003c\u003e\n      \u003cp\u003eStep 1\u003c/p\u003e\n      {isLoading \u0026\u0026 \u003cp\u003eloading...\u003c/p\u003e}\n      \u003cbutton onClick={() =\u003e previousStep()}\u003ePrevious\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e nextStep()}\u003eNext\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e goToStep(2)}\u003eGo to the last step\u003c/button\u003e\n      \u003cdiv\u003e\n        Has next step: {!isLastStep ? '✅' : '⛔'}\n        \u003cbr /\u003e\n        Has previous step : {!isFirstStep ? '✅' : '⛔'}\n      \u003c/div\u003e\n      Active step: {activeStep + 1} \u003cbr /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\nIt's recommended to pass the shared components to the `header` or `footer` in the `Wizard` to avoid duplication.\n\n## Playground\n\nSmall playground to showcase the functionalities of `react-use-wizard`:\n[https://devrnt.github.io/react-use-wizard/](https://devrnt.github.io/react-use-wizard/)\n\nFollowing use cases are available in the playground\n\n- Simple wizard with async and sync steps\n- Animated wizard with sync steps\n- Integration with [react-query](https://react-query.tanstack.com/) (mutation on next step)\n\nSource code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).\n\n## Examples\n\nGo to [examples](https://github.com/devrnt/react-use-wizard/tree/master/examples) to check out some integrations (Gatsby, NextJS...).\n\n## Async\n\nYou can attach an async step handler to a step as well. Make sure to make to either pass an async function or return a promise (async) function:\n\n```ts\nconst Step1 = () =\u003e {\n  const { handleStep } = useWizard();\n\n  // Async function\n  handleStep(async () =\u003e {\n    await fetch(...);\n  });\n\n  // OR\n\n  // Return promise\n  handleStep(() =\u003e {\n    return fetch(...);\n  });\n\n  ...\n}\n```\n\n### Errors\n\nIf no errors are thrown then the wizard will go to the next step, so no need to call `nextStep` by yourself.\n\nIf an error is thrown in the attached function the wizard will just stay at the same step and will rethrow the error. (So you can try-catch in your attached function).\n\n### IsLoading\n\nIf an async function is attached to `handleStep` the `isLoading` property will indicate the loading state of the function. In general `isLoading` will reflect the handler promise state: will be `true` if the handler promise is pending and `false` when the handler is either fulfilled or rejected.\n\n## Animation\n\nSince `react-use-wizard` is focused to manage the logic of a wizard it doesn't mean you can't add some animation by your own. Add any animation library that you like. I highly suggest [framer-motion](https://www.framer.com/motion/) to add your animations.\n\nCheckout this [example](https://github.com/devrnt/react-use-wizard/blob/main/playground/modules/wizard/animated/index.tsx) to see how a step can be animated with framer motion.\n\n## IE11\n\nSince Internet Explorer 11 doesn't support promises or async functions you'll need to install a polyfill for the `regenerator-runtime`.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevrnt%2Freact-use-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevrnt%2Freact-use-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevrnt%2Freact-use-wizard/lists"}