https://github.com/sametweb/react-step-builder
React Step Builder allows you to create step-by-step interfaces easily.
https://github.com/sametweb/react-step-builder
forms multi-step multi-step-form react-step-builder react-steps step
Last synced: 10 months ago
JSON representation
React Step Builder allows you to create step-by-step interfaces easily.
- Host: GitHub
- URL: https://github.com/sametweb/react-step-builder
- Owner: sametweb
- License: mit
- Created: 2020-02-24T02:13:22.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:16:02.000Z (about 3 years ago)
- Last Synced: 2024-09-19T23:29:48.929Z (over 1 year ago)
- Topics: forms, multi-step, multi-step-form, react-step-builder, react-steps, step
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-step-builder
- Size: 1.27 MB
- Stars: 105
- Watchers: 3
- Forks: 16
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Step Builder  [](https://www.npmjs.com/package/react-step-builder)
React Step Builder is a headless, unopinionated, multi-step interface builder.
> Version 3 introduces some breaking changes. If you are upgrading from earlier versions, please read the documentation carefully.
> 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 🙇♂️
# Installation
Using [npm](https://www.npmjs.com/):
```
npm install react-step-builder
```
# Usage
Example:
```jsx
import { Steps, StepsProvider, useSteps } from "react-step-builder";
const App = () => {
return (
);
};
const MySteps = () => {
const { next, prev } = useSteps();
return (
Step 1
Step 2
Step 3
);
};
export default App;
```
# Documentation
### **``**
A 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.
❌ Incorrect:
```jsx
```
✅ Correct:
```jsx
```
This 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.
| Property | Type | Description |
| -------------- | ------------ | ---------------------------------------------------------- |
| `onStepChange` | `() => void` | Runs on every step change. Does not run on initial render. |
### **`useSteps`**
A special hook that accesses the state of `` component and exposes methods to move between steps.
`const stepsState = useSteps();`
These are the properties inside `stepsState` object.
| Property | Type | Description |
| ---------- | ------------------------ | --------------------------------------------------- |
| `total` | `number` | Total number of steps |
| `current` | `number` | Current step number |
| `progress` | `number` | Progress of the current step, value between 0 and 1 |
| `next` | `() => void` | Function to move to the next step |
| `prev` | `() => void` | Function to move to the previous step |
| `jump` | `(step: number) => void` | Function to jump to the given step |
| `isFirst` | `boolean` | If the step is the first |
| `isLast` | `boolean` | If the step is the last |
| `hasPrev` | `boolean` | If the step has any previous step |
| `hasNext` | `boolean` | If the step has any next step |
### ``
The component that renders `` should be wrapped with `StepsProvider` component. `useSteps` can only be called in a component that is rendered in the DOM tree under `StepsProvider`.
| Property | Type | Description |
| -------------- | ------------ | --------------------------------------- |
| `startsFrom` | `number` | The default step number to be rendered. |
> 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.
Example project: https://codesandbox.io/s/react-step-builder-v3-5625v?file=/src/App.tsx