React-hook-form-wizard NPM

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.