Introducing Formik 0.9.0
Build forms in React, with a smile
Since its release in July, Formik has come a long way. It’s now the 2nd most starred form library for React on GitHub and 3rd most downloaded on NPM. Far more importantly, Formik is now used in production by a growing list of companies including Smyte, Capsule Health, and American Express.
Today I’m very excited to announce the next iteration of Formik (v0.9.0).
What follows is quick summary of the new features. For the full list, be sure to checkout the migration guide on GitHub.
If you have any issues with this release or need help, hit me up on Twitter or in the #formik channel in The Palmer Group’s community Slack.
Name change!
While the 0.8.0 API is staying in tact, the higher order component is getting a name change:
The old
Formik()method is now calledwithFormik()
Aside from this, 0.9.0 release is backwards compatible in both JavaScript AND TypeScript. Therefore, you can safely do a search and replace and be good to go.
Why the change? Keep reading…
(re)Introducing <Formik />
With 0.9.0, Formik now includes a brand new component called <Formik/> that makes writing forms even faster and more “React-y”.
Instead of sharing props and form state with a higher order component, <Formik> uses a “render prop” much like React Motion’s <Motion children> and React Router 4’s <Route render>. If you aren’t familiar with this pattern, I highly suggest watching
So what’s it look like?
What’s so great about render props instead of the HoC?
- Full and direct access to component props and state instead of partial versions passed as extra arguments
- Avoids naming conflicts
- A lot less ceremony and typing
- You don’t need to jump around the file since everything is just a prop now
Again, this new feature is completely optional. You do not need to use it if you don’t want to, but I would suggest giving it a day or two.
To learn more checkout the docs on GitHub.
<Field /> and <Form />
One of Formik’s main goals is to limit the amount of magical things going on in your forms. However, even with really nice abstractions, passing down props can get verbose. 0.9.0 includes two new helper components that you can use to wire up your forms even faster:
<Form>is basically<Form onSubmit={props.handleSubmit} {...props} /><Field>will render an<input/>by default, injectvalue[props.name],handleChange, andhandleBlur, and the spread any other props through. You can also tell<Field>to render a different component (i.e.component="select”orcomponent={MyCustomInput})
Together, these two helper components cut down on lines of code. Here is the exact same form as above, but written with <Field/> and <Form>
This is a pretty nice improvement, but we could go further by leveraging <Field component/> to refactor those error messages into a custom reusable input component. Check this out:
As you can see above, <Field> and <Form> allow you to write forms in a more concise yet equally expressive way. Coupled with the new render prop API through <Formik render>, building complex forms and reusable inputs in React has never been easier.
What’s next?
0.9.0 puts the project on a clear path to 1.0. Over the next month or so, I’ll be concentrating on a few key items:
- A website for docs and examples
- Formik DevTools Chrome extension
- Improved errors, logging, and debugging
I’m really excited about where Formik is going and extremely grateful to everyone that’s contributed to the project. 🙏🏻.
I’m Jared Palmer and instead of hunting and gathering, I run a software team that builds epic stuff for companies, startups, and governments. I’m passionate about open source and have authored a few libraries such as Formik, Razzle, and Backpack. While my weapon of choice is JavaScript, I’ve been hacking on ReasonML recently and am the organizer of the local NYC meetup.
Twitter: https://twitter.com/jaredpalmer
Newsletter: https://tinyletter.com/jaredpalmer
GitHub: https://github.com/jaredpalmer
