# @snovosel/react-wizard

> wizard component for easy step-based navigation and collection of data

Latest version **1.0.0** (published 2019-02-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install @snovosel/react-wizard
pnpm add @snovosel/react-wizard
yarn add @snovosel/react-wizard
bun add @snovosel/react-wizard
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-02-18 |
| First published | 2019-02-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | snovosel |

## Links

- npm: https://www.npmjs.com/package/@snovosel/react-wizard
- npm.io page: https://npm.io/package/@snovosel/react-wizard

## Recent versions

- 1.0.0 (latest) — 2019-02-18
- 0.0.1 — 2019-02-17

## README

### React Wizard

wizard navigation component for easy implementing step-by-step user experiences

## Installation

install the package using: `npm install @snovosel/react-wizard`

## Usage

Using the wizard component can be very easy. Define the steps you wish to be iterated through using an array.
The array can contain functions to pure JSX or specified components.

I recommend using pre-constructed components for the steps but in this example we will use pure jsx.

```javascript
const testSteps = [
  () => <h4>step one</h4>,
  () => <h3>step two</h3>,
  () => <h2>step three</h2>,
  () => <h1>step four</h1>
];
```

Then, the wizard component will expose the current step as a variable, along with several other component methods and values.

```JSX
<Wizard
  steps={testSteps}
  callBack={state => console.log("state callback", state)}
>
  {({
    CurrentStep,
    ...restWizardValues
  }) => (
    <CurrentStep
      {...restWizardValues}
    />
  )}
</Wizard>
```

### Exposed values

React-wizard exposes several values and functions (represented in the above example with "restWizardValues") within its render method to pass to the current step. From there, the developer will have access to all component methods and values from within the current step component. Here is the list of the list of exposed values/actions from react-wizard:

- `CurrentStep` - The current step to be rendered from the array passed into as a prop.
- `wizardValues` - the current object of values saved to the state of the wizard
- `back()` - navigate to the previous step.
- `next()` - navigate to the next step.
- `saveValue(String name, any value)` - save a value on the wizard. This function takes in a name and a value and will save them as a key/pair value within the value object of the component's state.

The actions defined above have all been separated to allow full flexibility to the developer. For example, a developer can save a value to the wizard without changing the current step, or change the current step without saving a value.

### Props

The props for this component are simple, the steps you want to iterate through, and the action you want to take on each step/update. The rest is taken care of by you! Styles, side-effects, actions, etc. The power is in your hands!

- `steps` - `Array[]` - An array of functions returning pure JSX or individual components. Recommended to use components for styling purposes.
- `callBack` - `function()` - function to be called on each wizard update.

#### additional information

Open to all suggestions and feedback for scaling this component.

Please report all bugs in the issues tab.

---

MIT License

Copyright (c) 2019 Steve Novosel

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---
_Source: https://npm.io/package/@snovosel/react-wizard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._