README
Step Wizard for React Hook Form
This is an attempt to create a form that validates as the user goes through each step. For now, it's most useful if you want to split the form but still have validation.
Install
yarn add step-wizard-react-hook react-hook-form @hookform/resolvers yup
Code Example
import React from 'react';
import { StepWizardWrapper, StepWizardTab } from 'step-wizard-react-hook';
const MyStepWizard = StepWizardWrapper(<TabComponent />);
export const App = () => {
return (
<MyStepWizard onSubmit={(data) => console.log(data)}>
<StepWizardTab name="Step 1">
<p>Step 1</p>
</StepWizardTab>
<StepWizardTab name="Step 2">
<p>Step 2</p>
</StepWizardTab>
<StepWizardTab name="Step 3">
<p>Step 3</p>
</StepWizardTab>
</MyStepWizard>
);
};
StepWizardWrapper
StepWizardWrapper needs to be called with the layout component inside so that it becomes StepWizardProvider. The Provider has the following properties and extends react-hook-form UseFormProps
.
Key | Type | Required | Description |
---|---|---|---|
onSubmit |
SubmitHandler<FormValues> |
true |
On submit event for the last step. |
aditionalData |
{ [key: string]: any } |
false |
Any additional data you want to provide in case you don't want to use another Context. |
children |
React.ReactNode |
true |
Tabs indicating each step of the form. |
StepWizardTab
This component is used to help the lib gather important information regarding each step.
Key | Type | Required | Description |
---|---|---|---|
id |
string |
false |
Create a unique identifier if needed. |
name |
string or React.ReactNode |
true |
Name for the layout tab bar. |
validationSchema |
any |
false |
Yup validation schema for the step. |
children |
React.ReactNode |
true |
Tab UI component for the form step. |
useStepWizard
This is the step wizard context containing the following data.
Key | Type | Description |
---|---|---|
formRef |
React.RefObject<HTMLFormElement> |
Reference to the wrapper form |
tabs |
StepWizardTabProps[] |
List of all children tabs props. |
step |
number |
Current step. |
currentTab |
StepWizardTabProps |
Current step tab. |
aditionalData |
{ [key: string]: any } |
Additional Data passed through Provider. |
gotoStep |
(newStep?: number) => void |
Go to a specific step. |
nextStep |
() => void |
Go to the next step. |
previousStep |
() => void |
Go to the previous step. |