https://github.com/vincentntang/multistep-wizard-formik-yup-reactstrap
👨🚀 Multistep Forms in React
https://github.com/vincentntang/multistep-wizard-formik-yup-reactstrap
form formik multistep reactstrap validator wizard wizard-multistep yup yup-validation
Last synced: 3 months ago
JSON representation
👨🚀 Multistep Forms in React
- Host: GitHub
- URL: https://github.com/vincentntang/multistep-wizard-formik-yup-reactstrap
- Owner: vincentntang
- Created: 2019-11-12T13:28:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T00:01:41.000Z (over 2 years ago)
- Last Synced: 2025-04-10T06:39:36.814Z (6 months ago)
- Topics: form, formik, multistep, reactstrap, validator, wizard, wizard-multistep, yup, yup-validation
- Language: JavaScript
- Homepage: https://codesandbox.io/s/formik-multiform-wizard-yup-reactstrap-ogfr2
- Size: 1010 KB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Intro
This is an example of how of using Formik's base wizard multistep example.
Features
- Yup validation library
- Reactstrap integration examples
https://codesandbox.io/s/formik-multiform-wizard-yup-reactstrap-ogfr2
## Installation
```
npm install
npm run start
```
## Some notes below of everything I used to make this repo
- (Formik base wizard example, no Yup validators) - https://github.com/jaredpalmer/formik/blob/master/examples/MultistepWizard.js
- (Formik base example with Yup) - https://codesandbox.io/s/zKrK5YLDZ
Issue log I used to upgrade / patch formik together
- (Passing props to each page) - https://github.com/jaredpalmer/formik/issues/844
- (Validations on each page only) - https://codesandbox.io/s/k5m5po380v
- (Validations on each page only - DOCS) - https://github.com/jaredpalmer/formik/issues/867
- (Integrating Reactstrap Inputs using tag={Field}) - https://github.com/jaredpalmer/formik/issues/670
- Additional useful information/examples I found
- (Triggering Label+Input+FormFeedback custom input) - https://codesandbox.io/s/qJR4ykJk
- (Using formik with 3rd party components) -https://codesandbox.io/s/jRzE53pqR
here's also the docs as well, these pages are important imo
- https://jaredpalmer.com/formik/docs/api/formik
Setting custom onChange
- setFieldValue is used to build your own custom onChange logic. Useful if you need side-effects.
- ^ e.g. a button modifies two variables behind the scenes
- https://stackoverflow.com/questions/54493071/how-to-pass-values-from-a-component-into-formik-multi-step-form-wizard/54517336#54517336