step-wizard-react-hook

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.