https://github.com/adiathasan/react-step-machine
A hook-based multistep wizard library with vast control over the logic of the user as per use-case.
https://github.com/adiathasan/react-step-machine
contex hooks react typescript wizard-steps
Last synced: about 1 year ago
JSON representation
A hook-based multistep wizard library with vast control over the logic of the user as per use-case.
- Host: GitHub
- URL: https://github.com/adiathasan/react-step-machine
- Owner: adiathasan
- Created: 2021-11-16T12:43:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T19:47:27.000Z (about 3 years ago)
- Last Synced: 2024-08-10T21:28:53.876Z (almost 2 years ago)
- Topics: contex, hooks, react, typescript, wizard-steps
- Language: TypeScript
- Homepage: https://adiathasan.vercel.app/react-step-machine
- Size: 1.36 MB
- Stars: 12
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A hooks-based multistep wizard (what I call it a machine 😻) built for React which is flexible and easy to use.
Huge shout out to [jcmcneal](https://github.com/jcmcneal) for the [React Step Wizard](https://github.com/jcmcneal/react-step-wizard). I took inspiration from his work and built this library with hooks and functional components.
I felt that I had to prop drill into the step components and for accessing the props outside the wrapper I needed to write some boilerplate code. I also wanted to make it easy to get access via hooks in any place in my scope of `StepMachine`.
[](https://badge.fury.io/js/react-step-machine)
[](https://raw.githubusercontent.com/adiathasan/react-step-machine/master/machine.gif)
### [](https://www.npmjs.com/package/react-step-machine#trying-it-out)Trying It Out!
[Click here](https://adiathasan.vercel.app/react-step-machine) to see a live example! See example source code: [>](https://github.com/adiathasan/react-step-machine/tree/master/src/lib)
### [](https://www.npmjs.com/package/react-step-machine#install)Install
```source-shell
npm install react-step-machine
----or----
yarn add react-step-machine
```
### [](https://www.npmjs.com/package/react-step-machine#import-component)Import Component
```tsx
// import StepMachine from 'react-step-machine'; (You can also import the default export and name it whatever you want)
import { StepMachine, StepContainer, Step } from 'react-step-machine';
```
### [](https://www.npmjs.com/package/react-step-machine#tsxjsx-syntax)TSX/JSX Syntax
1. Add a wrapper with ``.
2. For steps add another wrapper called ``.
3. Add `` to the `` eachone will be treated as steps.
4. Done for now!
### [](https://www.npmjs.com/package/react-step-machine#code-walk-through)Code walk through
```tsx
{/* Steps */}
step 2
step 3
{/* You will have more control with our special hooks inside components */}
```
### [](https://www.npmjs.com/package/react-step-machine#implementations)Implementations
Get methods and store props in the `ActionBtn/NavigationPreview/CustomComponent` with `useStepActions` & `useStepStore` hooks.
```tsx
import { StepMachine, StepContainer, Step } from 'react-step-machine';
const ActionBtn = () => {
const {
goToNamedStep,
goToStep,
firstStep,
lastStep,
nextStep,
previousStep,
} = useStepActions({
/**
* On Step change you can do something here
*/
onStepChange: (prevStep, activeStep) => {
console.log(prevStep, activeStep);
},
});
const {activeNamedStep, totalSteps, activeStep} = useStepStore();
return ....TO BE CONTINUED...
};
```
You have access to the following props:
```tsx
Step {activeStep}
Step {activeNamedStep}
Total Steps: {totalSteps}
Previous Step
Next Step
goToStep(2)}>Step 2
goToNamedStep("foo")}>Fooo
First Step
Last Step
```
#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-stepmachine)User-Defined Props In StepMachine
| Prop | Data Type | Default | Required | Description |
| ----------- | --------- | ------- | -------- | ------------------------------------------- |
| transitions | `object` | | false | CSS classes for transitioning between steps |
#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-stepcontainer)User-Defined Props In StepContainer
| Prop | Data Type | Default | Required | Description |
| ----------- | --------------- | ------- | -------- | ----------------------------- |
| initialStep | `integer` | 1 | false | The initial step to start at. |
| Style | `CSSProperties` | | false | Style objects css in js. |
| className | `string` | | false | ClassNames. |
#### [](https://www.npmjs.com/package/react-step-machine#user-defined-props-in-step)User-Defined Props In Step
| Prop | Data Type | Default | Required | Description |
| ----- | --------- | ------- | -------- | ----------------------------------------- |
| order | `integer` | | true | It is required for maintaining the order. |
| name | `string` | | false | Name prop for name based navigation. |
#### [](https://www.npmjs.com/package/react-step-machine#props-accessible-on-each-child-component-of-stepmachine-with-usestepstore-hook)Props Accessible On Each Child Component of StepMachine with `useStepStore` hook
| Prop | Data Type | Desrciption |
| --------------- | --------- | ---------------------------------------- |
| classes | `object` | All classess being applied to each step |
| namedSteps | `object` | All steps with names and orders |
| activatedSteps | `object` | Steps That are activated with navigation |
| totalSteps | `integer` | Total number of steps |
| activeStep | `integer` | Step Number That is active |
| activeNamedStep | `string` | Step Name That is active |
#### [](https://www.npmjs.com/package/react-step-machine#props-accessible-on-each-child-component-of-stepmachine-with-usestepactions-hook)Props Accessible On Each Child Component of StepMachine with `useStepActions` hook
| Prop | Data Type | Parameters |
| ------------- | ---------- | ------------------------------------- |
| firstStep | `function` | N/A |
| lastStep | `function` | N/A |
| nextStep | `function` | N/A |
| previousStep | `function` | N/A |
| goToStep | `function` | `integer` : `goToStep(3)` |
| goToNamedStep | `function` | `string `: `goToNamedStep('contact')` |
### [](https://www.npmjs.com/package/react-step-machine#transitions)Transitions
The default transitions are using CSS taken from [animate.css](https://daneden.github.io/animate.css/). You can override the transitions by passing in custom CSS classes to the `transitions` prop in ``.
```tsx
let custom = {
enterRight: 'your custom css transition classes',
enterLeft: 'your custom css transition classes',
exitRight: 'your custom css transition classes',
exitLeft: 'your custom css transition classes',
};
...;
```
### [](https://www.npmjs.com/package/react-step-machine#initial-step)Initial Step
The order of your steps in tsx/jsx will be loaded in the same order in the browser. However, you may specify which step to start on page load by using the `initialStep` prop. It accepts a numeric value corresponding to the step order.
```tsx
...
```
### [](https://www.npmjs.com/package/react-step-machine#use-named-steps)Use named steps
Switch steps by their names we can use `name`.
```tsx
// step-3
```