Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-formik-stepper
Advanced tools
Readme
A flexible multistep wizard built for React and Formik
npm install --save react-formik-stepper
or
yarn add react-formik-stepper
import FormikStepper from 'react-formik-stepper';
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();
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>
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 |
Prop | Data Type | Description |
---|---|---|
validation | object | Enter validation for each step. |
FAQs
A modern flexible step wizard component build for React Formik
The npm package react-formik-stepper receives a total of 0 weekly downloads. As such, react-formik-stepper popularity was classified as not popular.
We found that react-formik-stepper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.