Building React Forms using Formik

//Edit ✏️
reactjsformsreactreduxcontext

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

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.

  1. 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

  2. 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.

  3. 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

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

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.

CodeSandbox (ReactDOM)

Snack (React Native)

Explore More about Formik (I [@tkssharma] have Covered everything about formik in these training sessions.

(http://www.youtube.com/watch?v=3xMiK5mVBpM)

— 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)

  • [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/)

Comments