React Formik Stepper
A flexible multistep wizard built for React and Formik
Install
npm install --save react-formik-stepper
or
yarn add react-formik-stepper
Import Component
import FormikStepper from 'react-formik-stepper';
JSX Syntax
Simply create a wrapper with and each child component will be treated as an individual step.
<FormikStepper initialValues={{}} onSubmit={}>
<Step1 />
<Step2
validation={{
email: yup.string().required(),
}}
/>
...
<Step5 />
<WhateverComponentName />
</FormikStepper>
and then in each step
import { useFormikContext } from 'formik';
const formik = useFormikContext();
Props
Available in all steps.
Prop | Data Type |
---|
previousStep | function |
nextStep | function |
goToStep | function |
firstStep | number |
lastStep | number |
<div>
<!-- Variables -->
<h2>Step {this.props.currentStep}</h2>
<p>Total Steps: {this.props.totalSteps}</p>
<!-- Functions -->
<p><button onClick={this.props.previousStep}>Previous Step</button></p>
<p><button onClick={this.props.nextStep}>Next Step</button></p>
<p><button onClick={()=>this.props.goToStep(2)}>Step 2</button></p>
<p><button onClick={this.props.firstStep}>First Step</button></p>
<p><button onClick={this.props.lastStep}>Last Step</button></p>
</div>
FormikStepper Props
Step Props
Prop | Data Type | Description |
---|
validation | object | Enter validation for each step. |