Formik Wizard Form is stepper form component built over Formik (the most famous form library in react world). Now create your form wizards in a nice and declarative way.

npm install --save formik-wizard-form

Using formik wizard form is quite easy. Import all of its helper components and arrange them in a particular sequence. It contains a root component called FormikWizardProvider which uses Render Props , Compound Components and Prop Getters patterns to render its children components.

import {
	FormikWizardProvider,
	Wizard,
	StepsList,
	Step,
	ButtonsList,
	PreviousButton,
	NextButton,
	SubmitButton
} from  "formik-wizard-form";
import BasicDetails './BasicDetails'; // form for basic details
import ContactDetails './ContactDetails'; // form for contact info
import AddressDetails './AddressDetails'; // form for address info

const UserForm = (props) => (
	<FormikWizardProvider {...props}>
		{(renderProps) => (
			<Wizard {...renderProps}>
				<StepsList>
					<Step component={BasicDetails} title="Basic Details" />
					<Step component={ContactDetails} title="Contact Details" />
					<Step component={AddressDetails} title="Address Details" />
				</StepsList>
				<ButtonsList>
					<PreviousButton />
					<NextButton />
					<SubmitButton />
				</ButtonsList>
			</Wizard>
		)}
	</FormikWizardProvider>
);
// Finally wrap this form in withFormik higher order component given by formik
const ActualForm = withFormik(....)(UserForm);

<ActualForm /> // This is wizard with 3 steps

Thats it. It will render the wizard now.

The provider FormikWizardProvider gives a getValidators function in the render props which can be used by StepsList component as a prop called validators. Refer the following line of code:

<FormikWizardProvider {...props}>
    {({getValidators, ...otherProps}) => (
	    <Wizard {...otherProps}>
		    <StepsList validators={getValidators([null, validateContactInfo, validateAddressInfo])}>
			    ...// All the Step components			
		    </StepsList>
		    <ButtonsList>
		    ...	// Button components
			</ButtonsList>
		</Wizard>
	)}
</FormikWizardProvider>

In the above code, we have passed a validator function for each step. The validator function should return either true or false. Each validator is passed all the formik props like errors and touched. If any of your step doesn't have any validations, just pass null at that index. The order of validators is very important.

Example Validator

function validateContactInfo({ errors }) {
    return !errors.email && !errors.phone;
}

This the root component which accepts a function as children and that function is called with all the props received from withFormik HOC. These props can be passed to further components.

This must be the root component of your render function and pass all render props in it. Refer the example 😊

StepsList is the parent of all of your step pages.

Step is the actual page component

Root component of your wizard buttons. The children of ButtonsList should be the following:

This component renders Previous button of the wizard. You can also provide your own button component as its children. The onClick and disabled props will be automatically applied to your custom button if any.

This component renders Next button of the wizard. You can also provide your own button component as its children. The onClick and disabled props will be automatically applied to your custom button if any.

This component renders Submit button of the wizard. You can also provide your own button component as its children. Hitting the submit button will trigger the onSubmit of withFormik HOC.

Formik

Manish Jangir