Headless, unopinionated, multi-step interface builder.
npm install react-step-builder
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
$3
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. |
$3
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 |
$3
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.