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: 2 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T17:16:02.000Z (over 1 year ago)
• Last Synced: 2024-07-23T08:42:28.072Z (2 months 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: 104
• Watchers: 3
• Forks: 17
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

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)

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