# react-steps-wiz

> React component that makes it easy to create a wizard with any number of steps

Latest version **1.0.4** (published 2018-11-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-steps-wiz
pnpm add react-steps-wiz
yarn add react-steps-wiz
bun add react-steps-wiz
```

## 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.4 |
| Published | 2018-11-20 |
| First published | 2018-11-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | josuha87 |
| Maintainers | josuha87 |
| Keywords | react, form, wizard, JSON |

## Links

- npm: https://www.npmjs.com/package/react-steps-wiz
- Repository: https://github.com/jonassuonpera/react-step-wiz
- Homepage: https://github.com/jonassuonpera/react-step-wiz#readme
- Issues: https://github.com/jonassuonpera/react-step-wiz/issues
- npm.io page: https://npm.io/package/react-steps-wiz

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.6.3
- [webpack](https://npm.io/package/webpack.md) ^4.25.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.6
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-11-20
- 1.0.3 — 2018-11-17
- 1.0.2 — 2018-11-17
- 1.0.1 — 2018-11-17
- 1.0.0 — 2018-11-17

## README

# React Steps Wizard

Fast and easy way to create your own wizard. Simply add a unlimited number of steps and input fields. Data is returned as JSON when user has finished the wizard.

## Install

```bash
npm i react-steps-wiz
```

## Usage

```bash
import React, { Component } from 'react';

import Wizard from 'react-steps-wiz';

class App extends Component {

  handleSubmit(form) {
    console.log(form);
  }

  render() {

    let steps = [
      [{
          id: 1,
          info: 'name',
          type: 'text',
          placeholder: 'name',
        },
        {
          id: 2,
          info: 'telephone',
          type: 'number',
          placeholder: 'number',
        }
      ],
      [{
          id: 3,
          info: 'city',
          type: 'text',
          placeholder: 'city',
        },
        {
          id: 4,
          info: 'areacode',
          type: 'number',
          placeholder: 'areacode',
        }
      ]
    ]


    return ( 
      <Wizard 
        steps={steps}
        onSubmit={(form) => this.handleSubmit(form)}
      />
    );
  }
}

export default App;
```

### Required props
**steps**

All steps need to be passed to wizard as props as in code above. Note that the wizard takes in any number of steps and any number of input fields within each step.

**onSubmit**

This binds the wizard to the component that uses it.

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