Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy 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.
I (@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)
My goal with Formik was 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.
My talk at React Alicante goes much deeper into Formik's motivation and philosophy, introduces the library (by watching me build a mini version of it), and demos how to build a non-trivial form (with arrays, custom inputs, etc.) using the real thing.
Formik started by expanding on this little higher order component by Brent Jackson, some naming conventions from Redux-Form, and (most recently) the render props approach popularized by React-Motion and React-Router 4. Whether you have used any of the above or not, Formik only takes a few minutes to get started with.
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
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
This installation/usage requires the React CDN script bundles to be on the page as well.
You can play with Formik in your web browser with these live online playgrounds.
- CodeSandbox (ReactDOM) https://codesandbox.io/s/zKrK5YLDZ
- Expo Snack (React Native) https://snack.expo.io/@jaredpalmer/basic-formik-x-react-native-example
Formik keeps track of your form's state and then exposes it plus a few reusable
methods and event handlers (
your form via
handleBlur work exactly as
expected--they use a
id attribute to figure out which field to
The code above is very explicit about exactly what Formik is doing.
handleBlur, and so on. However, to save you time, Formik comes with a few extra components to make life easier and less verbose:
<Field />, and
<ErrorMessage />. They use React context to hook into the parent
<Formik /> state/methods.
As you can see above, validation is left up to you. Feel free to write your own
validators or use a 3rd party library. Personally, I use
Yup for object schema validation. It has an
API that's pretty similar Joi /
React PropTypes but is small enough
for the browser and fast enough for runtime usage. Because I ❤️ Yup sooo
much, Formik has a special config option / prop for Yup called
validationSchema which will
automatically transform Yup's validation errors into a pretty object whose keys
touched. Anyways, you can
install Yup from npm...