react-hook-form-wizard

A simple wizard for react-hook-form

Inspired by Brian Yang's multi-step wizard and the wizard form example on the react-hook-form website

I'm still new to React so don't beat me up too bad. If you'd like to provide feedback or contribute please let me know. This is still in development.

Limitations

Currently only local storage is supported

Components Included

<Wizard>
    <Progress />
    <Pages>
        <Page>
            <YourCustomPageComponent />
        </Page>
        <Page>
            {(dataContext, formContext, wizardContext) => {
                -- Form fields go here with access to context methods via render prop --
            }}
        </Page>
    </Pages>
    <Navigation />
</Wizard>

Component API

Wizard

| Prop | Type | Required | Description | | ------------- | ------------------------------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------- | | useFormArgs | Object | | Same arguments passed into useForm, see useForm | | initialPage | number | | Which page the wizard should start. Zero-based index. | | onSubmit | ({ dataContext, formContext, wizardContext}) => void | Yes | The submit function that will run on the final page of the form. | | enableDevTool | boolean | | Enable DevTool component include in little-state-machine, see docs |

Progress

This component is just for example purposes. Would likely not be used in a real-world scenario.

Pages

This component is a container component for Page components

Page

This component can contain your own components but also exposes render props for using included contexts. See basic usage example.

Navigation

This component is just for example purposes. Would likely not be used in a real-world scenario.

Hooks API

| Hook | State / Methods | Return / Argument | Description | | ---------------- | ----------------- | --------------------------- | ----------------------------------------------------------------------------- | | useDataContext | see below | | Hooks into the little-state-machine store. | | | action(payload) | (payload: Object) => void | Method to update store state. | | | state | Object | Returns store state. | | useFormContext | same as useForm | | see docs for useFormContext | | useWizardContext | see below | | Hooks into several states and methods for managing the wizard. | | | activePage | number | Returns the active page that the wizard is currently on. Zero-based index. | | | pageTotal | number | Returns the total number of Page components within the Pages component. | | | previousPage() | () => {} | Method for navigating to the previous page. | | | nextPage() | () => {} | Method for navigating to the next page. | | | goToPage(index) | (index: number) => void | Method for navigating to a particular page. Be careful for out of bounds. | | | isLastPage | boolean | Whether the active page is the last page. |

Basic Example

See Basic example demo