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 called withFormik()

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 Cheng Lou’s talk at React Europe and reading Michael Jackson’s recent blog post to get familiar.

So what’s it look like?

A basic form using Formik’s new <Formik> component. Render Props FTW.

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} />

is basically <Field> will render an <input/> by default, inject value[props.name] , handleChange , and handleBlur , and the spread any other props through. You can also tell <Field> to render a different component (i.e. component="select” or component={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>

A basic form using <Formik>, <Form>, and <Field>.

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:

Writing a custom input with the new <Field> component

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. 🙏🏻.