{"id":17108864,"url":"https://github.com/apuchenkin/react-stepper","last_synced_at":"2025-04-13T02:51:43.959Z","repository":{"id":34982702,"uuid":"189021047","full_name":"apuchenkin/react-stepper","owner":"apuchenkin","description":"React stepper","archived":false,"fork":false,"pushed_at":"2023-01-07T06:47:21.000Z","size":1781,"stargazers_count":8,"open_issues_count":41,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T01:01:38.985Z","etag":null,"topics":["material-design","react","reactjs","stepper","typescript"],"latest_commit_sha":null,"homepage":null,"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/apuchenkin.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":"2019-05-28T12:08:39.000Z","updated_at":"2022-05-24T14:52:20.000Z","dependencies_parsed_at":"2023-01-15T11:30:44.294Z","dependency_job_id":null,"html_url":"https://github.com/apuchenkin/react-stepper","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apuchenkin%2Freact-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apuchenkin%2Freact-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apuchenkin%2Freact-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apuchenkin%2Freact-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apuchenkin","download_url":"https://codeload.github.com/apuchenkin/react-stepper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248657870,"owners_count":21140844,"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":["material-design","react","reactjs","stepper","typescript"],"created_at":"2024-10-14T16:06:31.887Z","updated_at":"2025-04-13T02:51:43.936Z","avatar_url":"https://github.com/apuchenkin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React material stepper\n\nImplementation of [Material Stepper] for React. **React material stepper** encapsulates logic of step state maintianing, and provides API for control over the step resolution\n\n[Material Stepper]: https://material.io/archive/guidelines/components/steppers.html\n\n## Features\n\n- Simple, declarative configuration\n- Typescript typings\n- Horizontal and vertical layouts\n- Dynamic steps\n- locking\n- Default material themes provided\n- Customizable by SCSS\n\n## Examples\n\n- [Simple horizontal stepper][simple] ([source][simple_src])\n- [Simple verical stepper][vertical] ([source][vertical_src])\n- [Full featured stepper][advanced] ([source][advanced_src])\n\n[simple]: https://apuchenkin.github.io/react-stepper/example/dist/simple\n[vertical]: https://apuchenkin.github.io/react-stepper/example/dist/vertical\n[advanced]: https://apuchenkin.github.io/react-stepper/example/dist/full\n\n[simple_src]: example/src/simple\n[vertical_src]: example/src/vertical\n[advanced_src]: example/src/advanced\n\n## Getting started\n\n```jsx\nimport Stepper, { Step } from \"react-material-stepper\";\n\nconst StepperExample = () =\u003e (\n  \u003cStepper\u003e\n    \u003cStep\n      stepId={STEP1}\n      data=\"Step 1 initial state\"\n      title=\"Step One\"\n      description=\"This step is optional\"\n    \u003e\n      \u003cStep1 /\u003e\n    \u003c/Step\u003e\n    \u003cStep stepId={STEP2} title=\"Step Two\" description=\"Login is required\"\u003e\n      \u003cStep2 /\u003e\n    \u003c/Step\u003e\n    \u003cStep stepId={STEP3} title=\"Step Three\" \u003e\n      \u003cStep3 /\u003e\n    \u003c/Step\u003e\n  \u003c/Stepper\u003e\n);\n\n```\n*Example1: Basic stepper configuration, where `Step1`, `Step2` and `Step3` is arbitary user defined components*\n\nIn order to work with stepper API `StepperContext` could be used:\n\n```jsx\nimport {\n  StepperAction,\n  StepperContent,\n  StepperContext\n} from \"react-material-stepper\";\n\nexport const STEP1 = \"step-one\";\n\nconst Step1 = ({ vertical = false }) =\u003e {\n  const { resolve, getData } = React.useContext(StepperContext);\n\n  const data = getData(STEP1);\n\n  const onSubmit = (event: React.FormEvent) =\u003e {\n    event.preventDefault();\n    // resolve will set data for current step and proceed to the next step\n    resolve(\"step1 resolved data\");\n  };\n\n  return (\n    \u003cStepperContent\n      onSubmit={onSubmit}\n      actions={\n        \u003cStepperAction align=\"right\" type=\"submit\"\u003e\n          Continue\n        \u003c/StepperAction\u003e\n      }\n    \u003e\n      Step1 resolved:\n      \u003cpre\u003e{data}\u003c/pre\u003e\n    \u003c/StepperContent\u003e\n  );\n};\n```\n*Example2: `StepperContext` allows step data resolution. Saved data is accessible by `getData` method*\n\n\n## API\n\n### `Stepper`\n\n| Prop        | Type                                | Description                                                          |\n|-------------|-------------------------------------|----------------------------------------------------------------------|\n| initialStep | string \\| number                    | Stets initital step by `StepId`                                      |\n| onResolve   | (stepId) =\u003e {}                      | Callback that will be executed on each step resolution               |\n| onReject    | (stepId) =\u003e {}                      | Callback that will be executed on each step rejection                |\n| contextRef  | MutableRefObject\u003cStepperController\u003e | Stepper controller reference                                         |\n| className   | string                              | Custom classname will be added to the root stepper container         |\n| vertical    | boolean                             | Indicates either horizontal or vertical steppr layout should be used |\n\n### `Step`\n\n```jsx\n\u003cStep\n  stepId=\"2\"\n  title=\"Step Two\"\n  loading={isLoading(STEP2)}\n  description=\"Login is required\"\n\u003e\n  ...\n\u003c/Step\u003e\n```\n*Example3: `Step` component describes step configuration*\n\n| Prop        | Type            | Description                                      |\n|-------------|-----------------|--------------------------------------------------|\n| **title***  | string          | Step title. Required                             |\n| **stepId*** | string \\| number | Unique step identifier. Required                |\n| **children*** | ReactNode     | React component that will be rendered when step is activated. Required |\n| description | string          | Step description or hint. Optional               |\n| loading     | boolean         | Indicates whether step content is beign loading. |\n| disabled    | boolean         | Indicates whether step is beign disabled         |\n| data        | any             | Initial state of step                            |\n| className   | string          | Custom classname                                 |\n| index       | number          | Step index                                       |\n\n### `StepperContext`\n\nProvides API for control over stepper\n\n| Prop           | Type                         | Description                                                       |\n|----------------|------------------------------|-------------------------------------------------------------------|\n| updateStep     | (stepId, state) =\u003e {}        | Updates step state by id.                                         |\n| goAt           | stepId =\u003e {}                 | Activates certain step at provided stepId                         |\n| resolve        | data =\u003e {}                   | Resolves current step with provided data                          |\n| reject         | (message, description) =\u003e {} | Rejects current step with error and description                   |\n| isLoading      | () =\u003e boolean                | Indicates whether any of stepper steps is being loading           |\n| getCurrentStep | () =\u003e StepState              | Returns current step state                                        |\n| getStep        | stepId =\u003e StepState          | Returns step state by stepId                                      |\n| getData        | (stepId, fallback)           | Returns step data, fallback is used when step data is not defined |\n\n### `StepperContent`\n\n`StepperContent` extends `form` interface, Could be used in custom steps for convenience and styling.\nAdditionally `StepperContent` accept `actions` prop, that will be rendered in the footer of stepper content\n\n### `StepperAction`\n\n`StepperAction` extends `button` interface, Could be used in custom steps for convenience and styling.\nAdditionally `StepperAction` accept `align` ('left' or 'right') prop.\n\n## Customization\n\n### As part of [material theme]\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"react-material-stepper/src/index.scss\";\n@import \"material-components-web/material-components-web\";\n```\n\n[Material theme]: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme\n\n### By SCSS variables\n\n```scss\n$stepper-color-hover: lightblue;\n$stepper-color-index: darkblue;\n$stepper-color-success: green;\n$stepper-color-error: red;\n$stepper-color-connector: cornflowerblue;\n$stepper-header-height-horizontal: 64px;\n\n@import \"react-material-stepper/src/index.scss\";\n```\n\n### By CSS override\n\nStepper components allows passing custom `className`, and use it for override existing styles by applying css rules\n\n```jsx\nimport 'react-material-stepper/dist/react-stepper.css';\n```\n\n```jsx\n\u003cStepper className=\"custom-theme\"\u003e\n  \u003cStep\n    stepId={STEP1}\n    title=\"Step One\"\n  \u003e\n    \u003cStep1 /\u003e\n  \u003c/Step\u003e\n  ...\n\u003c/Stepper\u003e\n```\n\n\n```css\n.stepper.custom-theme {\n  background: red;\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapuchenkin%2Freact-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapuchenkin%2Freact-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapuchenkin%2Freact-stepper/lists"}