{"id":28089446,"url":"https://github.com/adiathasan/react-step-machine","last_synced_at":"2025-05-13T12:58:07.331Z","repository":{"id":57345359,"uuid":"428651267","full_name":"adiathasan/react-step-machine","owner":"adiathasan","description":"A hook-based multistep wizard library with vast control over the logic of the user as per use-case. ","archived":false,"fork":false,"pushed_at":"2023-03-22T19:47:27.000Z","size":1430,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-10T21:28:53.876Z","etag":null,"topics":["contex","hooks","react","typescript","wizard-steps"],"latest_commit_sha":null,"homepage":"https://adiathasan.vercel.app/react-step-machine","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/adiathasan.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":"2021-11-16T12:43:50.000Z","updated_at":"2023-04-11T00:02:08.000Z","dependencies_parsed_at":"2022-09-18T00:12:05.199Z","dependency_job_id":null,"html_url":"https://github.com/adiathasan/react-step-machine","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Freact-step-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Freact-step-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Freact-step-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adiathasan%2Freact-step-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adiathasan","download_url":"https://codeload.github.com/adiathasan/react-step-machine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948386,"owners_count":21988953,"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":["contex","hooks","react","typescript","wizard-steps"],"created_at":"2025-05-13T12:58:06.753Z","updated_at":"2025-05-13T12:58:07.305Z","avatar_url":"https://github.com/adiathasan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A hooks-based multistep wizard (what I call it a machine 😻) built for React which is flexible and easy to use.\n\nHuge shout out to [jcmcneal](https://github.com/jcmcneal) for the [React Step Wizard](https://github.com/jcmcneal/react-step-wizard). I took inspiration from his work and built this library with hooks and functional components.\n\nI felt that I had to prop drill into the step components and for accessing the props outside the wrapper I needed to write some boilerplate code. I also wanted to make it easy to get access via hooks in any place in my scope of `StepMachine`.\n\n[![npm version](https://camo.githubusercontent.com/653d7ecca95181cebe67e326bc0500f1cf0500e1aa9af8f5130d55ffd18ef460/68747470733a2f2f62616467652e667572792e696f2f6a732f72656163742d737465702d6d616368696e652e737667)](https://badge.fury.io/js/react-step-machine)\n\n[![What You Can Build](https://raw.githubusercontent.com/adiathasan/react-step-machine/master/machine.gif)](https://raw.githubusercontent.com/adiathasan/react-step-machine/master/machine.gif)\n\n### [](https://www.npmjs.com/package/react-step-machine#trying-it-out)Trying It Out!\n\n[Click here](https://adiathasan.vercel.app/react-step-machine) to see a live example! See example source code: [\u003c/\u003e](https://github.com/adiathasan/react-step-machine/tree/master/src/lib)\n\n### [](https://www.npmjs.com/package/react-step-machine#install)Install\n\n```source-shell\nnpm install react-step-machine\n----or----\nyarn add react-step-machine\n```\n\n### [](https://www.npmjs.com/package/react-step-machine#import-component)Import Component\n\n```tsx\n// import StepMachine from 'react-step-machine';  (You can also import the default export and name it whatever you want)\nimport { StepMachine, StepContainer, Step } from 'react-step-machine';\n```\n\n### [](https://www.npmjs.com/package/react-step-machine#tsxjsx-syntax)TSX/JSX Syntax\n\n1.  Add a wrapper with `\u003cStepMachine\u003e\u003c/StepMachine\u003e`.\n2.  For steps add another wrapper called `\u003cStepContainer\u003e\u003c/StepContainer\u003e`.\n3.  Add `\u003cStep order={1}\u003e\u003cYourComponent\u003e\u003c/Step\u003e` to the `\u003cStepContainer\u003e\u003c/StepContainer\u003e` eachone will be treated as steps.\n4.  Done for now!\n\n### [](https://www.npmjs.com/package/react-step-machine#code-walk-through)Code walk through\n\n```tsx\n\u003cStepMachine\u003e\n\t\u003cNavigationTitle /\u003e\n\t\u003cNavigationPreview /\u003e\n\n\t{/* Steps  */}\n\t\u003cStepContainer\u003e\n\t\t\u003cStep order={1} name='foo'\u003e\n\t\t\t\u003cCustomComponent /\u003e\n\t\t\u003c/Step\u003e\n\t\t\u003cStep order={2}\u003estep 2\u003c/Step\u003e\n\t\t\u003cStep order={3}\u003estep 3\u003c/Step\u003e\n\t\u003c/StepContainer\u003e\n\n\t{/* You will have more control with our special hooks inside components */}\n\t\u003cActionBtn /\u003e\n\u003c/StepMachine\u003e\n```\n\n### [](https://www.npmjs.com/package/react-step-machine#implementations)Implementations\n\nGet methods and store props in the `ActionBtn/NavigationPreview/CustomComponent` with `useStepActions` \u0026 `useStepStore` hooks.\n\n```tsx\nimport { StepMachine, StepContainer, Step } from 'react-step-machine';\n\nconst ActionBtn = () =\u003e {\n\tconst {\n\t\tgoToNamedStep,\n\t\tgoToStep,\n\t\tfirstStep,\n\t\tlastStep,\n\t\tnextStep,\n\t\tpreviousStep,\n\t} = useStepActions({\n\t\t/**\n\t\t * On Step change you can do something here\n\t\t*/\n\t\tonStepChange: (prevStep, activeStep) =\u003e {\n\t\t\tconsole.log(prevStep, activeStep);\n\t\t},\n\t});\n\n\tconst {activeNamedStep, totalSteps, activeStep} = useStepStore();\n\n\treturn ....TO BE CONTINUED...\n};\n```\n\nYou have access to the following props:\n\n```tsx\n\u003cdiv\u003e\n\t\u003c!-- Variables --\u003e\n\t\u003ch2\u003eStep {activeStep}\u003c/h2\u003e\n\t\u003ch2\u003eStep {activeNamedStep}\u003c/h2\u003e\n\t\u003cp\u003eTotal Steps: {totalSteps}\u003c/p\u003e\n\t\u003c!-- Methods --\u003e\n\t\u003cp\u003e\u003cbutton onClick={previousStep}\u003ePrevious Step\u003c/button\u003e\u003c/p\u003e\n\t\u003cp\u003e\u003cbutton onClick={nextStep}\u003eNext Step\u003c/button\u003e\u003c/p\u003e\n\t\u003cp\u003e\u003cbutton onClick={()=\u003egoToStep(2)}\u003eStep 2\u003c/button\u003e\u003c/p\u003e\n\t\u003cp\u003e\u003cbutton onClick={()=\u003egoToNamedStep(\"foo\")}\u003eFooo\u003c/button\u003e\u003c/p\u003e\n\t\u003cp\u003e\u003cbutton onClick={firstStep}\u003eFirst Step\u003c/button\u003e\u003c/p\u003e\n\t\u003cp\u003e\u003cbutton onClick={lastStep}\u003eLast Step\u003c/button\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-stepmachine)User-Defined Props In StepMachine\n\n| Prop        | Data Type | Default | Required | Description                                 |\n| ----------- | --------- | ------- | -------- | ------------------------------------------- |\n| transitions | `object`  |         | false    | CSS classes for transitioning between steps |\n\n#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-stepcontainer)User-Defined Props In StepContainer\n\n| Prop        | Data Type       | Default | Required | Description                   |\n| ----------- | --------------- | ------- | -------- | ----------------------------- |\n| initialStep | `integer`       | 1       | false    | The initial step to start at. |\n| Style       | `CSSProperties` |         | false    | Style objects css in js.      |\n| className   | `string`        |         | false    | ClassNames.                   |\n\n#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-step)User-Defined Props In Step\n\n| Prop  | Data Type | Default | Required | Description                               |\n| ----- | --------- | ------- | -------- | ----------------------------------------- |\n| order | `integer` |         | true     | It is required for maintaining the order. |\n| name  | `string`  |         | false    | Name prop for name based navigation.      |\n\n#### [](https://www.npmjs.com/package/react-step-machine#props-accessible-on-each-child-component-of-stepmachine-with-usestepstore-hook)Props Accessible On Each Child Component of StepMachine with `useStepStore` hook\n\n| Prop            | Data Type | Desrciption                              |\n| --------------- | --------- | ---------------------------------------- |\n| classes         | `object`  | All classess being applied to each step  |\n| namedSteps      | `object`  | All steps with names and orders          |\n| activatedSteps  | `object`  | Steps That are activated with navigation |\n| totalSteps      | `integer` | Total number of steps                    |\n| activeStep      | `integer` | Step Number That is active               |\n| activeNamedStep | `string`  | Step Name That is active                 |\n\n#### [](https://www.npmjs.com/package/react-step-machine#props-accessible-on-each-child-component-of-stepmachine-with-usestepactions-hook)Props Accessible On Each Child Component of StepMachine with `useStepActions` hook\n\n| Prop          | Data Type  | Parameters                            |\n| ------------- | ---------- | ------------------------------------- |\n| firstStep     | `function` | N/A                                   |\n| lastStep      | `function` | N/A                                   |\n| nextStep      | `function` | N/A                                   |\n| previousStep  | `function` | N/A                                   |\n| goToStep      | `function` | `integer` : `goToStep(3)`             |\n| goToNamedStep | `function` | `string `: `goToNamedStep('contact')` |\n\n### [](https://www.npmjs.com/package/react-step-machine#transitions)Transitions\n\nThe default transitions are using CSS taken from [animate.css](https://daneden.github.io/animate.css/). You can override the transitions by passing in custom CSS classes to the `transitions` prop in `\u003cStepMachine\u003e`.\n\n```tsx\nlet custom = {\n\tenterRight: 'your custom css transition classes',\n\tenterLeft: 'your custom css transition classes',\n\texitRight: 'your custom css transition classes',\n\texitLeft: 'your custom css transition classes',\n};\n\u003cStepContainer transitions={custom}\u003e...\u003c/StepContainer\u003e;\n```\n\n### [](https://www.npmjs.com/package/react-step-machine#initial-step)Initial Step\n\nThe order of your steps in tsx/jsx will be loaded in the same order in the browser. However, you may specify which step to start on page load by using the `initialStep` prop. It accepts a numeric value corresponding to the step order.\n\n```tsx\n\u003cStepContainer initialStep={3}\u003e...\u003c/StepContainer\u003e\n```\n\n### [](https://www.npmjs.com/package/react-step-machine#use-named-steps)Use named steps\n\nSwitch steps by their names we can use `name`.\n\n```tsx\n\u003cStepContainer\u003e\n\t\u003cBasicInfo name={'basic'} /\u003e\n\t\u003cContactInfo name={'contact'} /\u003e\n\t\u003cTermsConditions /\u003e // step-3\n\u003c/StepContainer\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiathasan%2Freact-step-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadiathasan%2Freact-step-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadiathasan%2Freact-step-machine/lists"}