open-index/open-npm huggingface dataset:
npm package: @gluedigital/multistep-form
Description: Helper components to easily make multistep forms
Author: Glue Digital
Latest version: 0.2.1

Multistep Form
==============

A simple solution to create multi-step forms.

It supports:
 - Validation at each step
 - TransitionGroup integration
 - Submit event with all the fields available


Usage demo
----------

```js
import { MultistepForm, FormStep, FormState } from '@gluedigital/multistep-form'

// ...

const MyComponent = () => (
  <MultistepForm steps={2} onSubmit={handleSubmit}>

    <FormStep step={1}>
      <label>
        Name:
        <input name="name" />
      </label>
    </FormStep>

    <FormStep step={2}>
      Tell us a bit about yourself:
      <textarea name="bio" />
    </FormStep>

    <FormState>
      {({step}) => `Step: ${step}/2`}
    </FormState>

    <input type="submit" value="Send" />
  </MultistepForm>
)
```


All options
-----------

Below we list all the available components and their props:

### MultistepForm

The main component, which acts as a replacement for the `<form>` tag.
All other components should appear inside this one, and it can't be nested.

| Prop     | Type   | Meaning |
|----------|--------|---------|
| steps    | number | The number of total steps on the form |
| onSubmit | func   | Handler that will be called on submit, and will receive all the saved data |
| children | any    | The form contents |

All other props will be passed through to the `<form>` tag.

### FormStep

Defines a form step, wrapping some contents which will be shown only when active.
Can be nested, which can be useful if the child steps have stricter conditions.

| Prop      | Type    | Meaning |
|-----------|---------|---------|
| step      | number  | The step number for this group |
| steps     | array   | Array of steps for this group (if shown on multiple steps) |
| condition | func    | Function `(data) => boolean` to check whether this step should be enabled |
| children  | any     | The step contents |
| nowrap    | boolean | Whether to wrap the contents on a div or not |

All other props will be passed through to the `<div>` tag, unless nowrap is set.

### FormState

A render-props enabled component to get form info for your own usage.
Useful for showing form info, like the current step or previously saved values.

| Prop     | Type | Meaning |
|----------|------|---------|
| children | func | Render props: `({data, step}) => any` |

### NextButton

A next/submit button to jump to the next step.
While you can use a regular `<input type="submit" />`, this component allows to set the next step, in case you want to skip some steps, or even go back.

| Prop       | Type           | Meaning |
|------------|----------------|---------|
| next       | number or func | Next step number, or function `(data) => number` |
| noValidate | boolean        | Skip form validation (and discard the current step inputs) |
| children   | any            | Button contents |