step-wizard-react-hook v0.3.2

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.

StepWizardTab

This component is used to help the lib gather important information regarding each step.

useStepWizard

This is the step wizard context containing the following data.