{"id":13469599,"url":"https://github.com/sametweb/react-step-builder","last_synced_at":"2025-03-26T07:30:55.223Z","repository":{"id":42536725,"uuid":"242627168","full_name":"sametweb/react-step-builder","owner":"sametweb","description":"React Step Builder allows you to create step-by-step interfaces easily.","archived":false,"fork":false,"pushed_at":"2023-01-07T17:16:02.000Z","size":1336,"stargazers_count":105,"open_issues_count":8,"forks_count":16,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-19T23:29:48.929Z","etag":null,"topics":["forms","multi-step","multi-step-form","react-step-builder","react-steps","step"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-step-builder","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/sametweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-24T02:13:22.000Z","updated_at":"2024-08-27T12:30:56.000Z","dependencies_parsed_at":"2023-02-07T17:46:35.222Z","dependency_job_id":null,"html_url":"https://github.com/sametweb/react-step-builder","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametweb%2Freact-step-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametweb%2Freact-step-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametweb%2Freact-step-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sametweb%2Freact-step-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sametweb","download_url":"https://codeload.github.com/sametweb/react-step-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222121829,"owners_count":16934973,"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":["forms","multi-step","multi-step-form","react-step-builder","react-steps","step"],"created_at":"2024-07-31T15:01:46.417Z","updated_at":"2024-10-29T22:31:20.812Z","avatar_url":"https://github.com/sametweb.png","language":"TypeScript","readme":"# React Step Builder ![npm (tag)](https://img.shields.io/npm/v/react-step-builder/latest?label=latest) [![Total NPM Download](https://img.shields.io/npm/dt/react-step-builder.svg)](https://www.npmjs.com/package/react-step-builder)\n\nReact Step Builder is a headless, unopinionated, multi-step interface builder.\n\n\u003e Version 3 introduces some breaking changes. If you are upgrading from earlier versions, please read the documentation carefully.\n\n\u003e Global state management methods are removed from the library. React Step Builder will only focus on building step-by-step interfaces starting from version 3. You may use a state management tool of your choice. If this is bad news for you, I am sorry 🙇‍♂️\n\n\u003cbr /\u003e\n\n# Installation\n\nUsing [npm](https://www.npmjs.com/):\n\n```\nnpm install react-step-builder\n```\n\n\u003cbr /\u003e\n\n# Usage\n\nExample:\n\n```jsx\nimport { Steps, StepsProvider, useSteps } from \"react-step-builder\";\n\nconst App = () =\u003e {\n  return (\n    \u003cStepsProvider\u003e\n      \u003cMySteps /\u003e\n    \u003c/StepsProvider\u003e\n  );\n};\n\nconst MySteps = () =\u003e {\n  const { next, prev } = useSteps();\n\n  return (\n    \u003cSteps\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003eStep 1\u003c/h1\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003eStep 2\u003c/h1\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003eStep 3\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/Steps\u003e\n  );\n};\n\nexport default App;\n```\n\n# Documentation\n\n### **`\u003cSteps /\u003e`**\n\nA component whose each direct sibling is treated as a step. **Do not add anything else inside `Steps` component** as they will be treated as a separate step.\n\n❌ Incorrect:\n\n```jsx\n\u003cSteps\u003e\n  \u003cStep1 /\u003e\n  \u003cStep2 /\u003e\n  \u003cNotAStep /\u003e\n\u003c/Steps\u003e\n```\n\n✅ Correct:\n\n```jsx\n\u003cSteps\u003e\n  \u003cStep1 /\u003e\n  \u003cStep2\u003e\n    \u003cNotAStep /\u003e\n  \u003c/Step2\u003e\n\u003c/Steps\u003e\n```\n\nThis reason for this method is due to React's _composition over inheritance_ principle. It also allows you to manage your state easily in the parent component.\n\n| Property       | Type         | Description                                                |\n| -------------- | ------------ | ---------------------------------------------------------- |\n| `onStepChange` | `() =\u003e void` | Runs on every step change. Does not run on initial render. |\n\n\u003cbr/\u003e\n\u003chr /\u003e\n\u003cbr /\u003e\n\n### **`useSteps`**\n\nA special hook that accesses the state of `\u003cSteps /\u003e` component and exposes methods to move between steps.\n\n`const stepsState = useSteps();`\n\nThese are the properties inside `stepsState` object.\n\n| Property   | Type                     | Description                                         |\n| ---------- | ------------------------ | --------------------------------------------------- |\n| `total`    | `number`                 | Total number of steps                               |\n| `current`  | `number`                 | Current step number                                 |\n| `progress` | `number`                 | Progress of the current step, value between 0 and 1 |\n| `next`     | `() =\u003e void`             | Function to move to the next step                   |\n| `prev`     | `() =\u003e void`             | Function to move to the previous step               |\n| `jump`     | `(step: number) =\u003e void` | Function to jump to the given step                  |\n| `isFirst`  | `boolean`                | If the step is the first                            |\n| `isLast`   | `boolean`                | If the step is the last                             |\n| `hasPrev`  | `boolean`                | If the step has any previous step                   |\n| `hasNext`  | `boolean`                | If the step has any next step                       |\n\n\u003cbr/\u003e\n\u003chr /\u003e\n\u003cbr /\u003e\n\n### `\u003cStepsProvider /\u003e`\n\nThe component that renders `\u003cSteps /\u003e` should be wrapped with `StepsProvider` component. `useSteps` can only be called in a component that is rendered in the DOM tree under `StepsProvider`.\n\n| Property       | Type         | Description                             |\n| -------------- | ------------ | --------------------------------------- |\n| `startsFrom`   | `number`     | The default step number to be rendered. |\n\n\u003e Step numbers start from 1 and goes up to the count of direct siblings given to the `Steps` component. If the number is out of range, first step is rendered by default.\n\n\u003cbr /\u003e\n\u003chr /\u003e\n\u003cbr /\u003e\nExample project: https://codesandbox.io/s/react-step-builder-v3-5625v?file=/src/App.tsx\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametweb%2Freact-step-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsametweb%2Freact-step-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsametweb%2Freact-step-builder/lists"}