# es-wizard

> Wizard component that walks users through a step-based workflow

Latest version **0.1.0** (published 2017-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install es-wizard
pnpm add es-wizard
yarn add es-wizard
bun add es-wizard
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-12-29 |
| First published | 2017-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jake Rios |
| Maintainers | jrios |

## Links

- npm: https://www.npmjs.com/package/es-wizard
- Repository: https://github.com/jrios/es-wizard
- Homepage: https://github.com/jrios/es-wizard#readme
- Issues: https://github.com/jrios/es-wizard/issues
- npm.io page: https://npm.io/package/es-wizard

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.0.0
- [lodash.noop](https://npm.io/package/lodash.noop.md) ^3.0.1
- [react-advancer](https://npm.io/package/react-advancer.md) ^1.0.0
- [styled-components](https://npm.io/package/styled-components.md) ^2.1.2

## Recent versions

- 0.1.0 (latest) — 2017-12-29
- 0.0.3 — 2017-12-12
- 0.0.2 — 2017-12-12
- 0.0.1 — 2017-12-12

## README

## ES Wizard

This is a compound component for building a Wizard workflow.

### Installation

`npm install -S es-wizard`

### Usage

````jsx
function MyApp() {
   const model = {
    stepOne: {
      fruits: ['Banana', 'Apple', 'Strawberries']
    },
    stepTwo: {
      name: "Jake",
      age: "28"
    }
  };

  return (
    <Wizard
      model={model}
      completeWizard={() => console.log('All done!')}
    >
      <Wizard.Step
        id="step1"
        modelSelector={wizardModel => wizardModel.stepOne}
        isPersistent={false}
        render={({ stepModel }) => {
          return (
            <div>
              <h3>Fruits</h3>
              <ul>
                {stepModel.fruits.map(fruit => <li>{fruit}</li>)}
              </ul>
            </div>
          );
        }} 
      />
      <Wizard.Step
        id="step2"
        modelSelector={wizardModel => wizardModel.stepTwo}
        persist={model => {
          console.log(model);
          return Promise.resolve();
        }}
        render={({ stepModel, update }) => {
          return (
            <div>
              <label htmlFor="name">Name</label>
              <input 
                id={name}
                onChange={event => update(wizardModel => {
                  return Object.assign(wizardModel, { stepTwo: { ...wizardModel.stepTwo, name: event.target.value }});
                })}
                defaultValue={stepModel.name} type="text" 
              />
    
              <p><strong>{stepModel.name}</strong> is {stepModel.age} years old</p>
            </div>
          );
        }} 
      />
      <Wizard.Step
        id="step3"
        isPersistent={false}
        modelSelector={wizardModel => wizardModel.stepTwo}
        render={({ stepModel }) => {
          return (
            <div>
              <p><strong>{stepModel.name}</strong> is {stepModel.age} years old</p>
            </div>
          );
        }} 
      />
    </Wizard>
  );
}
````

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