https://github.com/alan2207/react-multistep-wizard
🧙 React wizard component
https://github.com/alan2207/react-multistep-wizard
compound-components context-api multistep react render-props wizard wizard-component
Last synced: 2 months ago
JSON representation
🧙 React wizard component
- Host: GitHub
- URL: https://github.com/alan2207/react-multistep-wizard
- Owner: alan2207
- Created: 2019-08-07T20:29:39.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T01:12:56.000Z (over 2 years ago)
- Last Synced: 2025-03-28T19:09:24.987Z (3 months ago)
- Topics: compound-components, context-api, multistep, react, render-props, wizard, wizard-component
- Language: TypeScript
- Homepage:
- Size: 750 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-multistep-wizard
> React wizard component
[](https://www.npmjs.com/package/react-multistep-wizard)
[](https://standardjs.com)
## Install
```bash
npm install --save react-multistep-wizard
```
## Usage
```jsx
import React from 'react';
import { Wizard, Steps, Step } from 'react-multistep-wizard';
// simple example:
class Example extends React.Component {
render() {
return (
{ctx => (
Step 1: Next Step
)}
{ctx => (
Step 2: Next Step
)}
);
}
}
```
[Live Demo](https://codesandbox.io/s/mystifying-frog-wpdrk)
## API
## Exports:
### Components:
#### `Wizard`
Component that controls the entire state of the component.
##### props:
- `safe` - keeps the app from breaking on attempts to go to non existing steps.
- `onChange` - function triggered on change.
- `startStep` - choose from which step to start the wizard. Defaults to 1.
- `externalOverrides` - use it for the external control of the component, for
example if you want the wizard component to be controlled from an external
source.
```
{...}
```
#### `Steps`
Component that controls the rendering of the current step. Doesn't accept any
props, and must have the `Step` components as children.
#### `useWizard`
Hook that exposes the entire Wizard component state to consumer components.
#### `Step`
Component that describes the actual step. By using render prop function, it can
pass the wizard's context to the UI in order to allow user to control it from
within it.
Render prop options from `WizardContext`:
- `currentStep`
- `totalSteps`
- `previous`
- `next`
- `jump`
- `init`
#### `WithWizard`
Component similar to `Step`. The only difference is that it should not be
rendered from the `Steps` component, that way making sure it is always rendered
regardless of the current step. Convenient for progress indicators.
### TypeScript Types:
#### `WizardProps`
#### `WizardContextState`
For more info check out the example folder or the live demo.
## License
MIT © [alan2207](https://github.com/alan2207)