v0.11.0-alpha.3

Alpha 3

• <FieldArray> + helpers

Will add docs when this gets moved to master

v0.11.0-alpha.2

Alpha 2

Patch

#290 Fix missing argument in Field's setFieldError

v0.11.0-alpha.1

ALPHA RELEASE

• #207 Nested path syntax for handling deep updates and arrays
• #276 Sync and Async field-level validation via <Field validate={value => ...} />

Deprecations

• handleChangeValue has been removed entirely. It's been deprecated since 0.8

v0.10.1

🐛 Bug Fix

• Allow non-function children in <Field> so that <Field component="select"><option /><option /></Field> works

v0.10.0

0.10.0

Fully backwards compatible. No breaking changes.

🐛 Bug Fixes

• Fix checkbox behavior #223 by

🎉 New Feature

<Field> now also accepts a render prop.

Before

<Field name="firstName" placeholder="First Name"  />
<Field name="firstName" placeholder="First Name" component={MyInput}  />

After

<Field name="firstName" placeholder="First Name"  /> // same as before
<Field name="firstName" placeholder="First Name" component={MyInput}   /> // same as before

<Field 
   name="firstName"
   render={({field, form}) => /* note: props to Field not passed thru, cuz they are available already  */
      <div>
          <input {...field} placeholder="firstName" />
           {/* whatever */}
      </div>
  } 
/>

<Field name="firstName">
   {({field, form}) => 
      <div>
          <input {...field} placeholder="firstName" />
           {/* whatever */}
      </div>}
</Field>

With TypeScript

import * as React from 'react';
import { Formik, FormikProps, Form, Field, FieldProps } from 'formik';


interface MyFormValues {
  firstName: string;
}

export const MyApp: React.SFC<{}> = () => {
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={{ firstName: '' }}
        onSubmit={(values: MyFormValues) => alert(JSON.stringify(values))}
        render={(_formikBag: FormikProps<MyFormValues>) =>
          <Form>
            <Field
              name="firstName"
              render={({ field, form }: FieldProps<MyFormValues>) =>
                <div>
                  <input type="text" {...field} placeholder="First Name" />
                  {form.touched.firstName &&
                    form.errors.firstName &&
                    form.errors.firstName}
                </div>}
            />
          </Form>}
      />
    </div>
  );
};

Real-world example (composing render functions)

import * as React from 'react';
import * as cx from 'classnames';
import { Field, FieldConfig, FieldProps } from 'formik';

export interface FieldsetProps {
   /** blah */
}
// This wraps `<Field render>` with our error/touched logic, display, and formatting. 
export const Fieldset: React.SFC<FieldsetProps & FieldConfig> = ({ name, render, ...rest }) =>
  <Field
    name={name}
    render={({ field, form }: FieldProps<MyFormValues>) =>
      <div
        className={cx('fieldset', {
          'fieldset--error': form.errors[name] && form.touched[name],
        })}
      >
        {render({ field, form })}
        {form.touched.firstName &&
          form.errors.firstName &&
          form.errors.firstName}
      </div>
   }
   {...rest}
  />;

import * as React from 'react';
import { Formik, FormikProps, Form, Field, FieldProps } from 'formik';

export interface MyAppProps {}

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.SFC<MyAppProps> = () => {
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={{ firstName: '' }}
        onSubmit={(values: MyFormValues) => alert(JSON.stringify(values))}
        render={({
          _formikBag /* values, errors, handleChange ... */,
        }: FormikProps<MyFormValues>) =>
          <Form>
            <Fieldset
              name="firstName"
              render={({ field }: FieldProps<MyFormValues>) =>
                /** Stay DRY, just deal with the input, since errors handled in Fieldset */
                <input type="text" {...field} />}
            />
          </Form>}
      />
    </div>
  );
};

Note: In order to maintain backwards compat, the order or precedence among the render functions is DIFFERENT than <Formik />'s.

• <Field>: render > children > component
• <Formik>: component > render > children

This is because <Field/> defaults to component="input"

v0.9.4

Patch Release

• #197 Calling props.resetForm(nextValues) will now set props.initialValues = nextValues.

New contributor 🎉

• @slightlytyler

v0.9.3

Changes

• #168 Formik will no longer automagically reset the form when initialValues change. I added this feature thinking it would be desirable on most apps. However, it appears that I was wrong and it created headaches for people using Redux to get their initial values. Sorry about that. That's on me. If you still want this behavior, pass <Formik enableReinitialize={true}/> or withFormik({ enableReinitialize: true })(...). \

If you want to have more control, initialValues (i.e. initialValues as of first mount) is now available in props, so you can use that to control reset behavior with more granularity if you want to.

Bug Fix / Optimization

• #176 Run validations on methods in a callback. This allows React to batch updates and avoid a double render! Thanks @jontansey

New contributors 🎉

• @jontansey
• @skvale

What's coming?

• There is some progress on synchronous Yup. This would be game changing for testing.
• I benchmarked Redux Form vs. Formik and its not even a competition. I am working on a blog post this weekend. In the process, though, I also found a way to very safely optimize vanilla <Field/> (i.e. one's without custom component's) using shouldComponentUpdate. I have not yet released this because of I want to wait on #182 and #167 . Those on the bleeding edge can copy and paste the code from #185 .
• Website is in the works.

v0.9.2

Patch Release

• #180 Correctly pass props to validate and validationSchema in withFormik()
• #169 Fix check to call resetForm on componentWillReceiveProps

v0.9.1

After some discussion validateOnBlur is now set to true by default.

v0.9.0

🎉 What's new?

• New <Formik /> component
• <Field /> and <Form /> helpers
• mapValuesToPayload has been removed
• Improved warnings and error messages
• More docs and examples
• Website in the works...

🚧 Potentially breaking changes

• validateOnChange now defaults to true
• validateOnBlur now defaults to false

🚨 🚨 Breaking change 🚨 🚨

• Formik() has been renamed withFormik(). (The named Formik import is now used for the component and not for the HoC)

Migrating from 0.8.x to 0.9.x

The Formik() HoC function in 0.8.x has been renamed withFormik() in 0.9.0. Since withFormik() is fully backwards compatible (in both plain JavaScript and TypeScript), you can safely do a search and replace and things will just work.

Before (0.8.x)

import { Formik } from 'formik'

const enhancer = Formik({ ... config ... })

...

After (0.9.x)

import { withFormik } from 'formik'

const enhancer = withFormik({ ... config ... })

...