{"id":22994357,"url":"https://github.com/donadam2/react-dynamic-stepper","last_synced_at":"2026-04-01T19:36:40.121Z","repository":{"id":214599623,"uuid":"736903815","full_name":"DonAdam2/react-dynamic-stepper","owner":"DonAdam2","description":"Advanced and multi-feature stepper component designed to be incredibly versatile for a variety of workflows and use cases.","archived":false,"fork":false,"pushed_at":"2026-03-20T07:28:37.000Z","size":1553,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-20T22:58:50.370Z","etag":null,"topics":["react","rollup","scss","stepper","typescript"],"latest_commit_sha":null,"homepage":"","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/DonAdam2.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-12-29T07:58:44.000Z","updated_at":"2026-03-20T07:17:17.000Z","dependencies_parsed_at":"2024-08-08T09:06:25.369Z","dependency_job_id":"0bfb34d4-3fdb-489d-99bc-77e1a4083007","html_url":"https://github.com/DonAdam2/react-dynamic-stepper","commit_stats":null,"previous_names":["donadam2/react-dynamic-stepper"],"tags_count":12,"template":false,"template_full_name":"DonAdam2/react-rollup-npm-boilerplate","purl":"pkg:github/DonAdam2/react-dynamic-stepper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-dynamic-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-dynamic-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-dynamic-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-dynamic-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/react-dynamic-stepper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-dynamic-stepper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31291151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: 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":["react","rollup","scss","stepper","typescript"],"created_at":"2024-12-15T05:17:57.898Z","updated_at":"2026-04-01T19:36:40.108Z","avatar_url":"https://github.com/DonAdam2.png","language":"TypeScript","readme":"[![Storybook][badge_storybook]][package_link]\n[![Npm version][badge_npm-version]][package_link]\n[![Npm downloads][badge_npm-downloads]][package_link]\n[![Npm minified][badge_npm-minified]][package_link]\n[![Npm CICD][badge_npm-cicd]][package_link]\n\n# Table of Contents:\n- [Overview](#overview)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Stepper props](#stepper-props)\n- [Exported Types](#exported-types)\n- [Features and Methods](#features-and-methods)\n- [Resources](#resources)\n\n## Overview:\n\nAdvanced and multi-feature stepper component designed to be incredibly versatile for a variety of workflows and use cases.\n\nIt supports the following features:\n- Horizontal stepper UI.\n- Vertical stepper UI.\n- Inline stepper UI.\n- Sequence stepper.\n- Right to left languages.\n- Custom pallet.\n- Custom header (indicator and label).\n- Custom footer (global and per-step labels, classnames).\n- Custom connector between steps.\n- Disable step header click.\n- Prevent next click per step.\n- Keep custom indicator on complete.\n- Navigate to the required step programmatically.\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Demo:\n\nCheckout the demo of this package on [codepen][package_demo-link]\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Installation:\n\n- Via npm:\n```shell\nnpm install react-dynamic-stepper\n```\n- Via yarn:\n```shell\nyarn add react-dynamic-stepper\n```\n- Via pnpm:\n```shell\npnpm add react-dynamic-stepper\n```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Usage:\n\n```jsx\nimport { Stepper } from 'react-dynamic-stepper';\n\nconst App = () =\u003e {\n  const steps = [\n          {\n            header: {\n              label: 'Step 1',\n            },\n            content: \u003cdiv\u003eFirst step content\u003c/div\u003e,\n            isError: false,\n            isWarning: false,\n            isComplete: true,\n          },\n          {\n            header: {\n              label: 'Step 2',\n            },\n            content: \u003cdiv\u003eSecond step content\u003c/div\u003e,\n            footer: {\n              nextBtn: {\n                onClickHandler: () =\u003e console.log('clicked on second step next button'),\n              },\n            },\n            isLoading: false,\n            isError: false,\n            isComplete: true,\n          },\n          {\n            header: {\n              label: 'Step 3',\n            },\n            content: \u003cdiv\u003eThird step content\u003c/div\u003e,\n            isError: false,\n            isComplete: true,\n          },\n        ];\n\n  const submitStepper = () =\u003e {\n    console.log('submitted');\n  };\n\n  return (\n    \u003cStepper\n      steps={steps}\n      footerData={{\n        submitBtn: {\n          onClickHandler: submitStepper,\n        },\n      }}\n    /\u003e\n  );\n};\n```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Stepper props:\n\n| Prop                         | Type                           | Default | Required | Description                                                                                                                           |\n|------------------------------|--------------------------------|---------| ---       |---------------------------------------------------------------------------------------------------------------------------------------|\n| isRightToLeftLanguage        | Boolean                        | `false` | No | If true, sets the direction of the stepper to **rtl**                                                                                 |\n| isVertical                   | Boolean                        | `false` | No | If true, sets the orientation of the stepper to vertical                                                                              |\n| isInline                     | Boolean                        | `false` | No | If true, sets the header display of the stepper to inline                                                                             |\n| isSequenceStepper            | Boolean                        | `false` | No | If true, sets the stepper to sequence mode (forces the user to complete steps in sequence)                                            |\n| isStepConnector              | Boolean                        | `true`  | No | If false, removes the step connector                                                                                                  |\n| customConnector              | ReactNode                      | `null`  | No | Custom connector element to display between steps (only shows when isStepConnector is true)                                           |\n| disableStepHeaderClick       | Boolean                        | `false` | No | If true, disables clicking on step headers (indicator and label) to navigate directly to completed or error steps                     |\n| [ref](#features-and-methods) | `useRef\u003cStepperRef\u003e`                        | `null`  | No | It exposes `navigateToStepByIndex` and `navigateToStepById` functions, that can programmatically navigate the user to a specific step |\n| steps                        | [StepInterface[]](#StepInterface) | -       | Yes | Array of steps                                                                                                                        |\n| footerData                   | [FooterDataInterface[]](#FooterDataInterface)            | -       | Yes | Footer data                                                                                                                           |\n| pallet                       | [PalletInterface[]](#PalletInterface)                | -       | No | Pallet for custom color codes                                                                                                         |\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### StepInterface:\n\n| Prop                                       | Type                                            | Default                                    | Required | Description                                                                                                              |\n|--------------------------------------------|-------------------------------------------------|--------------------------------------------|----------|--------------------------------------------------------------------------------------------------------------------------|\n | id                                         | String                                          | -                                          | No       | Unique identifier for the step (required when using navigateToStepById)                                                 |\n| header.label                               | String                                          | -                                          | Yes      | The label to display on the step header                                                                                  |\n| header.indicator                           | ReactNode                                       | Step number                                | No       | Custom indicator for the step                                                                                            |\n| header.isKeepIndicatorOnComplete | Boolean                | `false`                                    | No       | Keep header indicator when step is completed                                                                             |\n| footer.nextBtn.label                       | String                                     | `Continue to ${nextStepLabel}` or `Submit` | No | Set next button label of the current step                                                                                |\n| footer.nextBtn.className                   | String                                     | `undefined` | No | CSS classname(s) to be applied to next button of the current step                                                                                |\n| footer.nextBtn.isPreventNextClick          | Boolean                                 | `false` | No | If true, clicking the 'Next' or 'Submit' button for the current step will not trigger any action unless its set to false |\n| footer.nextBtn.onClickHandler              | Function: `() =\u003e void` or `() =\u003e Promise\u003cvoid\u003e` | -                                          | No       | Invoked when the next button of the current step is clicked                                                              |\n| footer.prevBtn.label                       | String                                     | `Back to ${prevStepLabel}` | No | Set prev button label of the current step                                                                                |\n| footer.prevBtn.className                   | String                                     | `undefined` | No | CSS classname(s) to be applied to prev button of the current step                                                                                |\n| content                                    | ReactNode                                       | -                                          | Yes      | The content to display for the step                                                                                      |\n| isLoading                                  | Boolean                                         | `false`                                    | No       | If true, the 'Next' button will be disabled                                                                              |\n| isError                                    | Boolean                                         | `false`                                    | No       | If true, will display the step with error UI                                                                             |\n| isWarning                                  | Boolean                                         | `false`                                    | No       | If true, will display the step with warning UI                                                                           |\n| isComplete                                 | Boolean                                         | `false`                                    | Yes      | If true, will display the step with completed UI and enables 'Next' button                                               |\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### FooterDataInterface:\n\n| Prop | Type | Default                        | Required | Description                                                          |\n| ---  | ---  |--------------------------------|---       |----------------------------------------------------------------------|\n| prevBtn.label | String | `Back to ${prevStepLabel}`     | No  | Label for the prev button                                            |\n| prevBtn.className | String | `undefined`                    | No | CSS classname(s) to be applied to prev button                        |\n| nextBtn.label | String | `Continue to ${nextStepLabel}` | No  | Label for the next button                                            |\n| nextBtn.className | String | `undefined`                    | No | CSS classname(s) to be applied to next button                        |\n| submitBtn.label | String | `Submit`                       | No | Label for submit button in the last step                             |\n| submitBtn.className | String | `undefined`                    | No | CSS classname(s) to be applied to the submit button in the last step |\n| submitBtn.onClickHandler | Function: `() =\u003e void` or `() =\u003e Promise\u003cvoid\u003e` | -                              | Yes  | Invoked when the submit button is clicked                            |\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### PalletInterface:\n\n| Prop     | Type | Default | Required | Description                |\n|----------| ---  | ---     | ---      |----------------------------|\n| default  | String | `#627c90` | Yes | Default color code         |\n| warning  | String | `#f1c40f` | Yes | Color code for warning UI  |\n| danger   | String | `#e95a4b` | Yes | Color code for error UI    |\n| success  | String | `#4caf50` | Yes | Color code for success UI  |\n| disabled | String | `#e3e8ec` | Yes | Color code for disabled UI |\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Exported Types\n\nThe following TypeScript types are exported and available for consumers:\n\n```typescript\nimport {\n  Stepper,\n  StepperRef,\n  StepperInterface,\n  StepInterface,\n  FooterDataInterface,\n  PalletInterface,\n} from 'react-dynamic-stepper';\n```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Features and Methods\n\n### Navigate to step programmatically:\n\nThe **ref** passed to the Stepper component exposes two navigation functions that can programmatically navigate the user to a specific step. It can be useful in scenarios when controlling step navigation from outside the Stepper component is required.\n\n- **navigateToStepByIndex(index: number)**: Navigate to a step using its zero-based index position\n- **navigateToStepById(id: string)**: Navigate to a step using its unique identifier (requires the step to have an `id` property)\n\n\u003e ### ***Important Note***:\n\u003e\n\u003e Make sure to mark the required steps as **completed** if you want to **navigate programmatically** so that you can submit your stepper. This ensures that all necessary steps have been taken before the finish line.\n\n\u003cdetails\u003e\n\u003csummary\u003eJavaScript\u003c/summary\u003e\n\n```jsx\nimport { useRef } from 'react';\nimport { Stepper } from 'react-dynamic-stepper';\n\nconst App = () =\u003e {\n  const stepperRef = useRef(null);\n\n  const steps = [\n    {\n      id: 'step-1',\n      header: { label: 'Step 1' },\n      content: \u003cdiv\u003eFirst step content\u003c/div\u003e,\n      isComplete: true,\n    },\n    {\n      id: 'step-2', \n      header: { label: 'Step 2' },\n      content: \u003cdiv\u003eSecond step content\u003c/div\u003e,\n      isComplete: true,\n    },\n    // ... more steps\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          stepperRef.current?.navigateToStepByIndex(1);\n        }}\n      \u003e\n        Navigate to step 2 by index\n      \u003c/button\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          stepperRef.current?.navigateToStepById('step-2');\n        }}\n      \u003e\n        Navigate to step 2 by ID\n      \u003c/button\u003e\n      \u003cStepper\n        ref={stepperRef}\n        steps={steps}\n        /* OTHER PROPS */\n      /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003eTypeScript\u003c/summary\u003e\n\n```typescript jsx\nimport { useRef } from 'react';\nimport { Stepper, StepperRef, StepInterface } from 'react-dynamic-stepper';\n\nconst App = () =\u003e {\n  const stepperRef = useRef\u003cStepperRef\u003e(null);\n\n  const steps: StepInterface[] = [\n    {\n      id: 'step-1',\n      header: { label: 'Step 1' },\n      content: \u003cdiv\u003eFirst step content\u003c/div\u003e,\n      isComplete: true,\n    },\n    {\n      id: 'step-2', \n      header: { label: 'Step 2' },\n      content: \u003cdiv\u003eSecond step content\u003c/div\u003e,\n      isComplete: true,\n    },\n    // ... more steps\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          stepperRef.current?.navigateToStepByIndex(1);\n        }}\n      \u003e\n        Navigate to step 2 by index\n      \u003c/button\u003e\n      \u003cbutton\n        onClick={() =\u003e {\n          stepperRef.current?.navigateToStepById('step-2');\n        }}\n      \u003e\n        Navigate to step 2 by ID\n      \u003c/button\u003e\n      \u003cStepper\n        ref={stepperRef}\n        steps={steps}\n        /* OTHER PROPS */\n      /\u003e\n    \u003c/\u003e\n  );\n};\n```\n\u003c/details\u003e\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### Invoke a function on Next button click of current step\n\n- `step.footer.nextBtn.onClickHandler` =\u003e This is invoked when the 'Next' button of the current step is clicked.\n- If your `onClickHandler` returns a Promise and you want to navigate to the next step only if the Promise resolves successfully, you need to `throw error` inside the **catch** block:\n```typescript\nconst submitCurrentStep = async () =\u003e {\n    try {\n      /* Your business logic here */\n    } catch (error) {\n      throw error;\n    } finally {\n      /* Cleanup code here */\n    }\n  };\n```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### Step-level footer overrides\n\nStep-level footer props (`step.footer`) take priority over global footer props (`footerData`). This allows you to customize labels and classnames for individual steps while keeping global defaults for the rest:\n\n- `step.footer.prevBtn.label` overrides `footerData.prevBtn.label`\n- `step.footer.prevBtn.className` overrides `footerData.prevBtn.className`\n- `step.footer.nextBtn.label` overrides `footerData.nextBtn.label`\n- `step.footer.nextBtn.className` overrides `footerData.nextBtn.className`\n\nIf neither step-level nor global values are set, the defaults (`Back to ${prevStepLabel}` / `Continue to ${nextStepLabel}`) are used.\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Resources\n\n- [Changelog][changelog]\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n[changelog]: https://github.com/DonAdam2/react-dynamic-stepper/blob/main/CHANGELOG.md\n[badge_npm-version]: https://img.shields.io/npm/v/react-dynamic-stepper.svg\n[badge_npm-downloads]: https://img.shields.io/npm/dm/react-dynamic-stepper.svg\n[badge_npm-minified]: https://img.shields.io/bundlejs/size/react-dynamic-stepper\n[badge_npm-cicd]: https://github.com/DonAdam2/react-dynamic-stepper/actions/workflows/publish.yml/badge.svg\n[badge_storybook]: https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\n[package_link]: https://npmjs.org/package/react-dynamic-stepper\n[package_demo-link]: https://codepen.io/AdamMorsi/pen/qBRazPM","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-dynamic-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Freact-dynamic-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-dynamic-stepper/lists"}