{"id":18876193,"url":"https://github.com/keyvaluesoftwaresystems/react-stepper","last_synced_at":"2025-04-14T17:31:55.595Z","repository":{"id":105113517,"uuid":"605503939","full_name":"KeyValueSoftwareSystems/react-stepper","owner":"KeyValueSoftwareSystems","description":"A fully customizable ready to use vertical and horizontal stepper UI package.","archived":false,"fork":false,"pushed_at":"2024-03-28T21:07:59.000Z","size":3215,"stargazers_count":17,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-03T13:02:55.470Z","etag":null,"topics":["progress-ui","react","stepper","steps","steps-ui","typescript","vertical-stepper","webpack","workflow-stepper"],"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/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2023-02-23T09:49:01.000Z","updated_at":"2024-02-05T09:05:12.000Z","dependencies_parsed_at":"2023-12-21T10:51:34.433Z","dependency_job_id":"48efa2b9-e345-4069-93e5-5bba03e95782","html_url":"https://github.com/KeyValueSoftwareSystems/react-stepper","commit_stats":{"total_commits":93,"total_committers":5,"mean_commits":18.6,"dds":0.4946236559139785,"last_synced_commit":"e0e7adbc47df2e03dafc5248864cea464c47278e"},"previous_names":["keyvaluesoftwaresystems/react-stepper","keyvaluesoftwaresystems/react-vertical-stepper"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Freact-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/react-stepper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223639328,"owners_count":17177816,"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":["progress-ui","react","stepper","steps","steps-ui","typescript","vertical-stepper","webpack","workflow-stepper"],"created_at":"2024-11-08T06:11:33.223Z","updated_at":"2025-04-14T17:31:55.588Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Stepper\n\n\u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-stepper\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@keyvaluesystems/react-stepper?color=blue\" alt=\"npm version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/@keyvaluesystems/react-stepper\" \u003e\u003cimg src=\"https://img.shields.io/npm/dw/@keyvaluesystems/react-stepper?label=Downloads\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/KeyValueSoftwareSystems/react-stepper\"\u003e\u003cimg src=\"https://github.com/KeyValueSoftwareSystems/react-stepper/actions/workflows/update-and-publish.yml/badge.svg\" alt=\"\" /\u003e\u003c/a\u003e\n\n\u003cimg src=\"./src/assets/stepper-example.png\" alt=\"\" width=\"766\" height=\"310\" /\u003e\n\nA fully customizable ready to use stepper UI package for React.\nTry tweaking a stepper using this codesandbox link \u003ca href=\"https://codesandbox.io/p/sandbox/react-stepper-zp2jrs?file=%2Fsrc%2FApp.js\" \u003ehere\u003c/a\u003e\n\n## Installation\n\nThe easiest way to use react-stepper-ui-component is to install it from npm and build it into your app with Webpack.\n\n```bash\nnpm install  @keyvaluesystems/react-stepper\n```\n\nYou’ll need to install React separately since it isn't included in the package.\n\nNote for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.\n\n## Usage\n\nReact Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:\n\n```jsx\n\u003cStepper\n  steps={[\n    {\n      stepLabel: \"Step 1\",\n      stepDescription: \"This is Step 1\",\n      completed: true,\n    },\n    {\n      stepLabel: \"Step 2\",\n      stepDescription: \"This is Step 2\",\n      completed: false,\n    },\n    {\n      stepLabel: \"Step 3\",\n      stepDescription: \"This is Step 3\",\n      completed: false,\n    },\n  ]}\n  currentStepIndex={1}\n/\u003e\n```\n\nThe `steps` array is an array of objects with following keys:\n\n- `stepLabel` - A mandatory string representing the label/title of the step.\n- `stepDescription` - Optional extra information or description for the step.\n- `completed` -  Boolean flag for indicating step completion status.\n\nYou can customize each step node  with your own DOM element using the `renderNode` prop\n\n```jsx\n\u003cStepper\n  steps={stepsArray}\n  currentStepIndex={currentStepIndex}\n  renderNode={(step, stepIndex) =\u003e \u003cdiv key={stepIndex}\u003e{step.stepLabel}\u003c/div\u003e}\n/\u003e\n```\n\nThe `step` param provided by the `renderNode` callback is the same object you pass as array item in `steps` prop.\n\n## Props\n\nProps that can be passed to the component are listed below:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003esteps:\u003c/b\u003e object[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAn array of step objects to render.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003ecurrentStepIndex:\u003c/b\u003e number\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe index of current active step.\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eonStepClick?:\u003c/b\u003e (step: object, stepIndex: number): void\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        A step click handler that fires each time you click on a step.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003erenderNode?:\u003c/b\u003e (step: object, stepIndex: number): ReactElement\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        A render function to customize each step node with your own element.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eorientation?:\u003c/b\u003e 'horizontal' | 'vertical'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Determines the layout of the stepper.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003evertical\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003elabelPosition?:\u003c/b\u003e 'left' | 'right' | 'top' | 'bottom'\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Allows you to align step label and description with respect to its node\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003eshowDescriptionsForAllSteps\u003c/b\u003e boolean\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        A boolean prop specifying whether to show descriptions for all steps within the stepper.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003estepContent\u003c/b\u003e(step: object, stepIndex: number): ReactElement\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Prop that allows for dynamic content display when the step is active\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003e\u003cb\u003estyles?:\u003c/b\u003e object\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        Provides you with a bunch of callback functions to override the default styles.\n      \u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eundefined\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Style Customizations\n\nAll the default styles provided by this package can be overridden using the `styles` prop\nBelow code shows how to override the default styles of completed steps, connector lines and current active step\n\n```jsx\nimport React from \"react\";\nimport Stepper from \"@keyvaluesystems/react-stepper\";\n\nfunction App() {\n\n  const styles = {\n    LineSeparator: () =\u003e ({\n      backgroundColor: \"#028A0F\",\n    }),\n    ActiveNode: () =\u003e ({\n      backgroundColor: \"#028A0F\",\n    }),\n    CompletedNode: () =\u003e ({\n      backgroundColor: \"#028A0F\",\n  };\n\n  return (\n    \u003cStepper\n      steps={stepsArray}\n      currentStepIndex={currentStepIndex}\n      styles={styles}\n    /\u003e\n  );\n}\n\nexport default App;\n```\nAdditional customizations can be made by overriding the customizable styles listed below:\n\n```jsx\nconst stylesOverride = {\n    LabelTitle: (step, stepIndex) =\u003e ({ ...styles }),\n    ActiveLabelTitle: (step, stepIndex) =\u003e ({ ...styles }),\n    LabelDescription: (step, stepIndex) =\u003e ({ ...styles }),\n    ActiveLabelDescription: (step, stepIndex) =\u003e ({ ...styles }),\n    LineSeparator: (step, stepIndex) =\u003e ({ ...styles }),\n    InactiveLineSeparator: (step, stepIndex) =\u003e ({ ...styles }),\n    Node: (step, stepIndex) =\u003e ({ ...styles }),\n    ActiveNode: (step, stepIndex) =\u003e ({ ...styles }),\n    InActiveNode: (step, stepIndex) =\u003e ({ ...styles }),\n  };\n  ```\n\n- `LabelTitle` - overrides the step label style\n- `ActiveLabelTitle` - overrides the step label style of current active step\n- `LabelDescription` - overrides the step description style\n- `ActiveLabelDescription` - overrides the step description style of current active step\n- `LineSeparator` - overrides default completed step connector line styles\n- `InactiveLineSeparator` - overrides styles of step connector line after current active step\n- `Node` - overrides default styles of step indicator\n- `ActiveNode` - overrides default styles of step indicator of current active step\n- `InActiveNode` - overrides default styles of step indicator that is not completed and not active\n- `CompletedNode` - overrides default styles of completed step indicator\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Freact-stepper/lists"}