Writing React Forms using Formik Library
[tkssharma/react-forms-formik
React Formik Course. Contribute to tkssharma/react-forms-formik development by creating an account on GitHub.github.com](https://github.com/tkssharma/react-forms-formik "https://github.com/tkssharma/react-forms-formik")
Overview (From Formik Documentation)
Formik is a library that helps us to write forms in React.
forms are really verbose in React. To make matters worse, most form helpers do way too much magic and often have a significant performance cost associated with them. Formik is a small library that helps you with the 3 most annoying parts:
Getting values in and out of form state
Validation and error messages
Handling form submission
By colocating all of the above in one place, Formik will keep things organized — making testing, refactoring, and reasoning about your forms a breeze.
Motivation
(@jaredpalmer) wrote Formik while building a large internal administrative dashboard with @eonwhite. With around ~30 unique forms, it quickly became obvious that we could benefit by standardizing not just our input components but also the way in which data flowed through our forms.
Why not Redux-Form?
By now, you might be thinking, “Why didn’t you just use Redux-Form?” Good question.
- According to our prophet Dan Abramov, form state is inherently ephemeral and local, so tracking it in Redux (or any kind of Flux library) is unnecessary
- Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This is fine for small apps, but as your Redux app grows, input latency will continue to increase if you use Redux-Form.
- Redux-Form is 22.5 kB minified gzipped (Formik is 12.7 kB)
The goal of Formik is to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you.
Installation
You can install Formik with NPM, Yarn, or a good ol’ <script> via unpkg.com.
NPM
npm install formik --save
or
yarn add formik
Formik is compatible with React v15+ and works with ReactDOM and React Native.
You can also try before you buy with this demo of Formik on CodeSandbox.io
CDN
If you’re not using a module bundler or package manager we also have a global (“UMD”) build hosted on the unpkg.com CDN. Simply add the following <script> tag to the bottom of your HTML file:
Once you’ve added this you will have access to the window.Formik.<Insert_Component_Name_Here> variables.
This installation/usage requires the React CDN script bundles to be on the page as well.
In-browser Playgrounds
You can play with Formik in your web browser with these live online playgrounds.
Explore More about Formik (I @tkssharma have Covered everything about formik in these training sessions.
— References
[Getting Started
Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and…formik.org](https://formik.org/docs/overview "https://formik.org/docs/overview")
[Using Formik to Handle Forms in React | CSS-Tricks
There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a…css-tricks.com](https://css-tricks.com/using-formik-to-handle-forms-in-react/ "https://css-tricks.com/using-formik-to-handle-forms-in-react/")
