{"id":14981974,"url":"https://github.com/srdjan/react-multistep","last_synced_at":"2025-05-14T08:05:51.632Z","repository":{"id":25871351,"uuid":"29311476","full_name":"srdjan/react-multistep","owner":"srdjan","description":"React multistep wizard component","archived":false,"fork":false,"pushed_at":"2025-02-11T13:01:27.000Z","size":1968,"stargazers_count":658,"open_issues_count":8,"forks_count":185,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-14T08:05:45.777Z","etag":null,"topics":["css","esbuild","forms","javascript","jsx","react","reactjs","responsive","ui","ui-components","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"http://srdjan.github.io/react-multistep/","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/srdjan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-01-15T18:26:11.000Z","updated_at":"2025-03-30T10:21:53.000Z","dependencies_parsed_at":"2023-01-14T03:35:35.123Z","dependency_job_id":"3e518759-d526-4287-a9c3-90ffe9db9344","html_url":"https://github.com/srdjan/react-multistep","commit_stats":{"total_commits":371,"total_committers":20,"mean_commits":18.55,"dds":0.2857142857142857,"last_synced_commit":"e09fb83fa64dbd2cd69f1d24bb2b721599b017ab"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Freact-multistep","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Freact-multistep/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Freact-multistep/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srdjan%2Freact-multistep/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srdjan","download_url":"https://codeload.github.com/srdjan/react-multistep/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101615,"owners_count":22014909,"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":["css","esbuild","forms","javascript","jsx","react","reactjs","responsive","ui","ui-components","wizard","wizard-steps"],"created_at":"2024-09-24T14:04:35.127Z","updated_at":"2025-05-14T08:05:46.624Z","avatar_url":"https://github.com/srdjan.png","language":"JavaScript","readme":"# Responsive React multistep form component\n\n\u003c/br\u003e\n\u003c/br\u003e\n  \n## Take it for a [__SPIN!__](http://srdjan.github.io/react-multistep/) :dizzy:\n\n\u003c/br\u003e\n\n\u003ckbd\u003e\n\u003cimg border=width=\"500px\" height=\"300px\" src=\"https://raw.githubusercontent.com/srdjan/react-multistep/master/assets/react-multistep.png\"/\u003e\n\u003c/kbd\u003e  \n  \n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n  \n#### List of contributors :raised_hands:\n\u003ca href = \"https://github.com/react-multistep/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=srdjan/react-multistep\" alt=\"AWESOME CONTRIBUTORS\" /\u003e\n\u003c/a\u003e\n  \n\u003c/br\u003e\n\u003c/br\u003e\n\u003c/br\u003e\n\n\n### Previous MultiStep major version, v5.4.0\n\n```\nVersion 5.x.x is in a maintenance mode, the new development is ongoing on v6.x.x. Version (v5.x.x) bug fixes will still be available on NPM, if you would like to open a PR for a fix or make a fork, git checkout branch v5.x.x. The new version, v6.0.0 has a multiple improvements (see below) and is not backwards compatible.\n```\n\n#\n\n### Instructions\n\nTo use this module in your app run:\n\n```sh\nnpm install react-multistep\n```\n\nnext, import it inside of your app:\n\n```jsx\nimport MultiStep from \"react-multistep\";\n```\n\nand then, in your application, you add your custom components/forms this way:\n\n```jsx\n\u003cMultiStep activeStep={0} prevButton={prevButton} nextButton={nextButton}\u003e\n  \u003cStepOne title=\"Step 1\" /\u003e\n  \u003cStepTwo title=\"Step 2\" /\u003e\n\u003c/MultiStep\u003e\n```\n\nMultiStep component accepts following props (all optional, except Steps array):\n\n| PROPERTY        | DESCRIPTION                                               | TYPE          | DEFAULT | isRequired |\n| --------------- | --------------------------------------------------------- | ------------- | ------- | ---------- |\n| showTopNav      | controls if the navigation buttons are visible            | boolean       | true    | false      |\n| prevButton      | configure the prev navigation button                      | NavButtonProp | null    | false      |\n| nextButton      | configure the next the navigation button                  | NavButtonProp | null    | false      |\n| stepCustomStyle | control style of step                                     | CSSProperties | null    | false      |\n| direction       | control the steps nav direction                           | column        | row     | false      |\n| activeStep      | it takes a number representing representing starting step | number        | 0       | false      |\n\n#### 🚀 NEW! you can also use style props for the navigation buttons and change how they look with two props 'prevButton' \u0026 'nextButton':\n\n| PROPERTY | DESCRIPTION                                       | TYPE          | DEFAULT     | isRequired |\n| -------- | ------------------------------------------------- | ------------- | ----------- | ---------- |\n| title    | The display string value of the navigation button | string        | Prev / Next | false      |\n| style    | The css style of the navigation button            | CSSProperties | null        | false      |\n\n#\n\n#### To configure Multistep component, we `inline` child components:\n\n```javascript\n    \u003cMultiStep  title: 'Order Workflow'}\n                activeStep={2}\n                  prevButton={{title: 'Back','style:{ background: 'red' }}}\n                nextButton={{title: 'Forward','style:{ background: 'green' }}}\n    \u003e\n    \u003cStepOne title='StepOne'/\u003e\n    \u003cStepTwo title='StepTwo'/\u003e\n    \u003cStepThree title='StepThree'/\u003e\n    \u003cStepFour title='StepFour'/\u003e\n\u003c/MultiStep\u003e\n```\n\nWhen configured this way, each component (`Step`) of the array can have following two properties:\n\n| PROPERTY  | DESCRIPTION                                 | TYPE        | DEFAULT    | isRequired |\n| --------- | ------------------------------------------- | ----------- | ---------- | ---------- |\n| component | the step representing component             | JSX.Element | null       | true       |\n| title     | the step title, present above the steps nav | text        | step index | false      |\n\n#\n\n#### 🚀 NEW! Feature: Controlling navigation to the next step with form validation\n\nTo enable this feature, when the child form component needs to control 'Next' navigational button, based on it's local validation, MultiStep dynamically adds a new prop function to child components that should be used to signal validation status. MultiStep will disable /enable `Next` button accordingly. This function has follwing signature:\n\n`signalParent(valid: boolean)`\n\nBy default the state is `false` and child components invokes it based on current outcome of the validation. In the example app, a simple checkbox is used to simulate valid/not valid.\n\nThis can be seen in the `example` app, but here are the relevant parts, required inside of the form child component:\n\n\u003cimg width=\"600\" alt=\"child-step-component-changes\" src=\"https://user-images.githubusercontent.com/61190/213932636-5f2d8dfe-0f98-457e-9f0f-6a890174a834.png\"\u003e\n\n## Instructions for local development\n\n#### If you would like to explore further, contribute a PR or just try the included code example:\n\nStart by cloning the repo locally:\n\n```sh\ngit clone https://github.com/srdjan/react-multistep.git\n```\n\nthen:\n\n```sh\ncd react-multistep            // (1) navigate to the project folder\nnpm install                   // (2) install dependencies\nnpm run build                 // (3) build the component\n```\n\nOn a successful build, try the example app:\n\n```sh\ncd ../example                 // (1) navigate to the example folder\nnpm install                   // (2) install dependencies\nnpm run build                 // (3) build the example\nnpm start                     // (4) start the local server\n```\n\nNow, you can open the example in your favorite browser...\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrdjan%2Freact-multistep","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrdjan%2Freact-multistep","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrdjan%2Freact-multistep/lists"}