A simple wizard for react-hook-form
npm install react-hook-form-wizard
{(dataContext, formContext, wizardContext) => {
-- Form fields go here with access to context methods via render prop --
}}
`
---
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. |