Skip to content

NadsonKT/react-formik-stepper

 
 

Repository files navigation

React Formik Stepper

npm

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

Prop Data Type Description
initialValues Values Initial field values of the form, Formik will make these values available to render methods component as values. https://formik.org/docs/api/formik#initialvalues-values
onSubmit function Your form submission handler. https://formik.org/docs/api/formik#onsubmit-values-values-formikbag-formikbag--void--promiseany
onReset function Your optional form reset handler. https://formik.org/docs/api/formik#onreset-values-values-formikbag-formikbag--void
validate function I suggest using yup for validation in each step. However, validate is a dependency-free, out of the box way to validate your forms. https://formik.org/docs/api/withFormik#validate-values-values-props-props--formikerrorsvalues--promiseany
validateOnChange boolean Default is true. Determines if form validation should or should not be run after any array manipulations.
https://formik.org/docs/api/fieldarray#validateonchange-boolean
validateOnBlur boolean Default is true. Use this option to run validations on blur events. More specifically, when either handleBlur, setFieldTouched, or setTouched are called
https://formik.org/docs/api/withFormik#validateonblur-boolean
validateOnMount boolean Default is false. Use this option to tell Formik to run validation (at low priority) when the wrapped component mounts and/or initialValues change.
https://formik.org/docs/api/withFormik#validateonmount-boolean
enableReinitialize boolean Default is false. Control whether Formik should reset the form if the wrapped component props change (using deep equality).
https://formik.org/docs/api/withFormik#enablereinitialize-boolean
animate boolean Default is true. Uses animation from Animate CSS

Step Props

Prop Data Type Description
validation object Enter validation for each step.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 87.5%
  • JavaScript 6.9%
  • HTML 5.6%