Repository: jaredpalmer/formik
Pull request #896 (2018-09-11 18:31:15)

Add <ErrorMessage />
This is a nice helper that should make building out custom "Fieldset" in everyone's apps easier. It is cross platform and will work in React Native. 

## Usage

```jsx
<ErrorMessage component="div" name="email" />
// --> {touched.email && error.email ? <div>{error.email}</div> : null}

<ErrorMessage component="span" name="email" />
// --> {touched.email && error.email ? <span>{error.email}</span> : null}

<ErrorMessage component={Custom} name="email" />
// --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}

<ErrorMessage name="email" />
// This will return a string. React 16+.
// --> {touched.email && error.email ? error.email : null}

// the render callback will only be called when the
// field has been touched and an error exists and subsequent updates.
<ErrorMessage name="email">
  {msg => <div>{msg}</div>}
</ErrorMessage>

<ErrorMessage name="email" render={msg => <div>{msg}</div>} />
```


## Example

```diff
import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from "yup";

const SignupSchema = Yup.object().shape({
  name: Yup.string()
    .min(2, 'Too Short!')
    .max(70, 'Too Long!')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
});

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        name: '',
        email: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="name"  />
-           {errors.name && touched.name ? (
-            <div>{errors.name}</div>
-          ) : null}
+         <ErrorMessage  component="div" name="name" />
          <Field name="email" type="email" />
-           {errors.email && touched.email ? (
-            <div>{errors.email}</div>
-          ) : null}
+         <ErrorMessage name="email">
+             {msg => <div>{msg}</div>}
+          </ErrorMessage>            
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);
```




Patch:
diff --git a/docs/api/errormessage.md b/docs/api/errormessage.md
new file mode 100644
index 0000000..8811b3a
--- /dev/null
+++ b/docs/api/errormessage.md
@@ -0,0 +1,119 @@
+---
+id: errormessage
+title: <ErrorMessage />
+---
+
+`<ErrorMessage />` is a component that renders the error message of a given field if that field has been visited (i.e.`touched[name] === true`) (and there is an `error` message present). It expects that all error messages are stored for a given field as a string. Like `<Field />`, `<FastField />`, and `<FieldArray />`, lodash-like dot path and bracket syntax is supported.
+
+## Example
+
+```diff
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from "yup";
+
+const SignupSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(2, 'Too Short!')
+    .max(70, 'Too Long!')
+    .required('Required'),
+  email: Yup.string()
+    .email('Invalid email')
+    .required('Required'),
+});
+
+export const ValidationSchemaExample = () => (
+  <div>
+    <h1>Signup</h1>
+    <Formik
+      initialValues={{
+        name: '',
+        email: '',
+      }}
+      validationSchema={SignupSchema}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      {({ errors, touched }) => (
+        <Form>
+          <Field name="name"  />
+-           {errors.name && touched.name ? (
+-            <div>{errors.name}</div>
+-          ) : null}
++         <ErrorMessage name="name" />
+          <Field name="email" type="email" />
+-           {errors.email && touched.email ? (
+-            <div>{errors.email}</div>
+-          ) : null}
++         <ErrorMessage name="email" />
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+```
+
+#### Props
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+---
+
+# Reference
+
+## Props
+
+### `children`
+
+`children?: ((message: string) => React.ReactNode)`
+
+A function that returns a valid React element. Will only be called when the field has been touched and an error exists.
+
+```jsx
+// the render callback will only be called when the
+// field has been touched and an error exists and subsequent updates.
+<ErrorMessage name="email">{msg => <div>{msg}</div>}</ErrorMessage>
+```
+
+### `component`
+
+`component?: string | React.ComponentType<FieldProps>`
+
+Either a React component or the name of an HTML element to render. If not specified, `<ErrorMessage>` will just return a string.
+
+```jsx
+<ErrorMessage component="div" name="email" />
+// --> {touched.email && error.email ? <div>{error.email}</div> : null}
+
+<ErrorMessage component="span" name="email" />
+// --> {touched.email && error.email ? <span>{error.email}</span> : null}
+
+<ErrorMessage component={Custom} name="email" />
+// --> {touched.email && error.email ? <Custom>{error.email}</Custom> : null}
+
+<ErrorMessage name="email" />
+// This will return a string. React 16+.
+// --> {touched.email && error.email ? error.email : null}
+```
+
+### `name`
+
+`name: string`
+**Required**
+
+A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like `social.facebook` or `friends[0].firstName`
+
+### `render`
+
+`render?: (error: string) => React.ReactNode`
+
+A function that returns a valid React element. Will only be called when the field has been touched and an error exists.
+
+```jsx
+// the render callback will only be called when the
+// field has been touched and an error exists and subsequent updates.
+<ErrorMessage name="email" render={msg => <div>{msg}</div>} />
+```
diff --git a/src/ErrorMessage.tsx b/src/ErrorMessage.tsx
new file mode 100644
index 0000000..21acec3
--- /dev/null
+++ b/src/ErrorMessage.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { FormikContext } from './types';
+import { getIn, isFunction } from './utils';
+import { connect } from './connect';
+
+export interface ErrorMessageProps {
+  name: string;
+  component?: string | React.ComponentType;
+  children?: ((errorMessage: string) => React.ReactNode);
+  render?: ((errorMessage: string) => React.ReactNode);
+}
+
+class ErrorMessageImpl extends React.Component<
+  ErrorMessageProps & { formik: FormikContext<any> }
+> {
+  shouldComponentUpdate(
+    props: ErrorMessageProps & { formik: FormikContext<any> }
+  ) {
+    if (
+      getIn(this.props.formik.errors, this.props.name) !==
+        getIn(props.formik.errors, this.props.name) ||
+      getIn(this.props.formik.touched, this.props.name) !==
+        getIn(props.formik.touched, this.props.name) ||
+      Object.keys(this.props).length !== Object.keys(props).length
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  render() {
+    let { component, formik, render, children, name, ...rest } = this.props;
+
+    const touch = getIn(formik.touched, name);
+    const error = getIn(formik.errors, name);
+
+    return !!touch && !!error
+      ? render
+        ? isFunction(render) ? render(error) : null
+        : children
+          ? isFunction(children) ? children(error) : null
+          : component
+            ? React.createElement(component, rest as any, error)
+            : error
+      : null;
+  }
+}
+
+export const ErrorMessage = connect<
+  ErrorMessageProps,
+  ErrorMessageProps & { formik: FormikContext<any> }
+>(ErrorMessageImpl);
diff --git a/src/Formik.tsx b/src/Formik.tsx
index 8a482ea..f26dc12 100755
--- a/src/Formik.tsx
+++ b/src/Formik.tsx
@@ -152,7 +152,9 @@ export class Formik<Values = {}, ExtraProps = {}> extends React.Component<
   };
 
   setSubmitting = (isSubmitting: boolean) => {
-    this.setState({ isSubmitting });
+    if (this.didMount) {
+      this.setState({ isSubmitting });
+    }
   };
 
   /**
@@ -364,6 +366,9 @@ export class Formik<Values = {}, ExtraProps = {}> extends React.Component<
     value: any,
     shouldValidate: boolean = true
   ) => {
+    if (!this.didMount) {
+      return;
+    }
     // Set form field by name
     this.setState(
       prevState => ({
diff --git a/src/index.tsx b/src/index.tsx
index 58deb38..2d22b0f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,3 +7,4 @@ export * from './utils';
 export * from './FastField';
 export * from './types';
 export * from './connect';
+export * from './ErrorMessage';
diff --git a/website/package.json b/website/package.json
index a5c0e57..642b5da 100644
--- a/website/package.json
+++ b/website/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "examples": "docusaurus-examples",
     "start": "docusaurus-start",
-    "build": "docusaurus-build && cp now.json build/now.json",
+    "build": "docusaurus-build",
     "publish-gh-pages": "docusaurus-publish",
     "write-translations": "docusaurus-write-translations",
     "version": "docusaurus-version",
@@ -11,4 +11,4 @@
   "devDependencies": {
     "docusaurus": "^1.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/website/pages/en/versions.js b/website/pages/en/versions.js
new file mode 100644
index 0000000..d089568
--- /dev/null
+++ b/website/pages/en/versions.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary');
+
+const Container = CompLibrary.Container;
+
+const CWD = process.cwd();
+
+const siteConfig = require(`${CWD}/siteConfig.js`);
+const versions = require(`${CWD}/versions.json`);
+
+function Versions() {
+  const latestVersion = versions[0];
+  const repoUrl = `https://github.com/${siteConfig.organizationName}/${
+    siteConfig.projectName
+  }`;
+  return (
+    <div className="docMainWrapper wrapper">
+      <Container className="mainContainer versionsContainer">
+        <div className="post">
+          <header className="postHeader">
+            <h1>{siteConfig.title} Versions</h1>
+          </header>
+          <p>New versions of this project are released every so often.</p>
+          <h3 id="latest">Current version (Stable)</h3>
+          <table className="versions">
+            <tbody>
+              <tr>
+                <th>{latestVersion}</th>
+                <td>
+                  <a href="">Documentation</a>
+                </td>
+                <td>
+                  <a href="">Release Notes</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <p>
+            This is the version that is configured automatically when you first
+            install this project.
+          </p>
+          <h3 id="rc">Pre-release versions</h3>
+          <table className="versions">
+            <tbody>
+              <tr>
+                <th>master</th>
+                <td>
+                  <a href="">Documentation</a>
+                </td>
+                <td>
+                  <a href="">Release Notes</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <p>Other text describing this section.</p>
+          <h3 id="archive">Past Versions</h3>
+          <table className="versions">
+            <tbody>
+              {versions.map(
+                version =>
+                  version !== latestVersion && (
+                    <tr>
+                      <th>{version}</th>
+                      <td>
+                        <a href="">Documentation</a>
+                      </td>
+                      <td>
+                        <a href="">Release Notes</a>
+                      </td>
+                    </tr>
+                  )
+              )}
+            </tbody>
+          </table>
+          <p>
+            You can find past versions of this project on{' '}
+            <a href={repoUrl}>GitHub</a>.
+          </p>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+module.exports = Versions;
diff --git a/website/sidebars.json b/website/sidebars.json
index 669881b..60ed069 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -2,6 +2,6 @@
   "docs": {
     "Getting Started": ["overview", "tutorial", "resources"],
     "Guides": ["guides/validation", "guides/arrays", "guides/typescript", "guides/react-native", "guides/form-submission"],
-    "API Reference": ["api/formik", "api/withFormik", "api/field", "api/fieldarray", "api/form", "api/connect", "api/fastfield"]
+    "API Reference": ["api/formik", "api/withFormik", "api/field", "api/fieldarray", "api/form", "api/errormessage", "api/connect", "api/fastfield"]
   }
 }
\ No newline at end of file
diff --git a/website/versioned_docs/version-1.2.0/api/connect.md b/website/versioned_docs/version-1.2.0/api/connect.md
new file mode 100644
index 0000000..10d96c0
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/connect.md
@@ -0,0 +1,31 @@
+---
+id: version-1.2.0-connect
+title: connect()
+original_id: connect
+---
+
+`connect()` is a higher-order component (HoC) that allows you to hook anything into Formik's context. It is used internally to construct `<Field>` and `<Form>`, but you can use it to build out new components as your needs change.
+
+## Type signature
+
+```tsx
+connect<OuterProps, Values = any>(Comp: React.ComponentType<OuterProps & FormikProps<Values>>) => React.ComponentType<OuterProps>
+```
+
+## Example
+
+```jsx
+import React from 'react';
+import { connect, getIn } from 'formik';
+
+// This component renders an error message if a field has
+// an error and it's already been touched.
+const ErrorMessage = props => {
+  // All FormikProps available on props.formik!
+  const error = getIn(props.formik.errors, props.name);
+  const touch = getIn(props.formik.touched, props.name);
+  return touch && error ? error : null;
+};
+
+export default connect(ErrorMessage);
+```
diff --git a/website/versioned_docs/version-1.2.0/api/fastfield.md b/website/versioned_docs/version-1.2.0/api/fastfield.md
new file mode 100644
index 0000000..727ed97
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/fastfield.md
@@ -0,0 +1,136 @@
+---
+id: version-1.2.0-fastfield
+title: <FastField />
+original_id: fastfield
+---
+
+## Before we start
+
+`<FastField />` is meant for performance _optimization_. However, you really do not need to use it until you do. Only proceed if you are familiar with how React's [`shouldComponentUpdate()`](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) works. You have been warned.\*\*
+
+**No. Seriously. Please review the following parts of the official React documentation before continuing**
+
+* [React `shouldComponentUpdate()` Reference](https://reactjs.org/docs/react-component.html#shouldcomponentupdate)
+* [`shouldComponentUpdate` in Action](https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action)
+
+## Overview
+
+`<FastField />` is an optimized version of `<Field />` meant to be used on large forms (~30+ fields) or when a field has very expensive validation requirements. `<FastField />` has the same exact API as `<Field>`, but implements `shouldComponentUpdate()` internally to block all additional re-renders unless there are direct updates to the `<FastField />`'s relevant parts/slice of Formik state.
+
+For example, `<FastField name="firstName" />` will only re-render when there are:
+
+* Changes to `values.firstName`, `errors.firstName`, or `touched.firstName`. This is determined by shallow comparison. Note: dotpaths are supported.
+* A prop is added/removed to the `<FastField name="firstName" />`
+* The `name` prop changes
+
+Other than for these aforementioned situations, `<FastField />` will not re-render when other parts of of Formik state change. However, all updates triggered by a `<FastField />` will trigger re-renders to other "vanilla" `<Field />` components.
+
+## When to use `<FastField />`
+
+**If a `<Field />` is "independent" of all other `<Field />`'s in your form, then you can use `<FastField />`**.
+
+More specifically, if the `<Field />` does not change behavior or render anything that is based on updates to another `<Field />` or `<FastField />`'s slice of Formik state AND it does not rely on other parts of top-level `<Formik />` state (e.g. `isSubmitting`, `isValidating`, `submitCount`), then you can use `<FastField />` as a drop-in replacement to `<Field />`.
+
+## Example
+
+```js
+import React from 'react';
+import { Formik, Field, FastField, Form } from 'formik';
+
+const Basic = () => (
+  <div>
+    <h1>Sign Up</h1>
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+      }}
+      validationSchema={Yup.object().shape({
+        firstName: Yup.string().required(),
+        middleInitial: Yup.string(),
+        lastName: Yup.string().required(),
+        email: Yup.string()
+          .email()
+          .required(),
+      })}
+      onSubmit={values => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+        }, 500);
+      }}
+      render={formikProps => (
+        <Form>
+          {/** This <FastField> only updates for changes made to
+           values.firstName, touched.firstName, errors.firstName */}
+          <label htmlFor="firstName">First Name</label>
+          <FastField name="firstName" placeholder="Weezy" />
+
+          {/** Updates for all changes because it's from the
+           top-level formikProps which get all updates */}
+          {form.touched.firstName &&
+            form.errors.firstName && <div>{form.errors.firstName}</div>}
+
+          <label htmlFor="middleInitial">Middle Initial</label>
+          <FastField
+            name="middleInitial"
+            placeholder="F"
+            render={({ field, form }) => (
+              <div>
+                <input {...field} />
+                {/**
+                 * This updates normally because it's from the same slice of Formik state,
+                 * i.e. path to the object matches the name of this <FastField />
+                 */}
+                {form.touched.middleInitial ? form.errors.middleInitial : null}
+
+                {/** This won't ever update since it's coming from
+                 from another <Field>/<FastField>'s (i.e. firstName's) slice   */}
+                {form.touched.firstName && form.errors.firstName
+                  ? form.errors.firstName
+                  : null}
+
+                {/* This doesn't update either */}
+                {form.submitCount}
+
+                {/* Imperative methods still work as expected */}
+                <button
+                  type="button"
+                  onClick={form.setFieldValue('middleInitial', 'J')}
+                >
+                  J
+                </button>
+              </div>
+            )}
+          />
+
+          {/** Updates for all changes to Formik state
+           and all changes by all <Field>s and <FastField>s */}
+          <label htmlFor="lastName">LastName</label>
+          <Field
+            name="lastName"
+            placeholder="Baby"
+            render={({ field, form }) => (
+              <div>
+                <input {...field} />
+                {/** Works because this is inside
+                 of a <Field/>, which gets all updates */}
+                {form.touched.firstName && form.errors.firstName
+                  ? form.errors.firstName
+                  : null}
+              </div>
+            )}
+          />
+
+          {/** Updates for all changes to Formik state and
+           all changes by all <Field>s and <FastField>s */}
+          <label htmlFor="email">Email</label>
+          <Field name="email" placeholder="jane@acme.com" type="email" />
+
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    />
+  </div>
+);
+```
diff --git a/website/versioned_docs/version-1.2.0/api/field.md b/website/versioned_docs/version-1.2.0/api/field.md
new file mode 100644
index 0000000..0b4fb64
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/field.md
@@ -0,0 +1,265 @@
+---
+id: version-1.2.0-field
+title: <Field />
+original_id: field
+---
+
+`<Field />` will automagically hook up inputs to Formik. It uses the `name`
+attribute to match up with Formik state. `<Field />` will default to an HTML
+`<input />` element.
+
+## Field render props
+
+There are 3 ways to render things with `<Field>`.
+
+* `<Field component>`
+* `<Field render>`
+* `<Field children>`
+
+Aside from string-only `component`, each render prop is passed the same props for your convenience.
+
+Field's render props are an object containing:
+
+* `field`: An object containing `onChange`, `onBlur`, `name`, and `value` of the field
+* `form`: The Formik bag.
+* Any other props passed to field
+
+## Example
+
+```jsx
+import React from 'react';
+import { Formik, Field } from 'formik';
+
+const Example = () => (
+  <div>
+    <h1>My Form</h1>
+    <Formik
+      initialValues={{ email: '', color: 'red', firstName: '' }}
+      onSubmit={(values, actions) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          actions.setSubmitting(false);
+        }, 1000);
+      }}
+      render={(props: FormikProps<Values>) => (
+        <form onSubmit={props.handleSubmit}>
+          <Field type="email" name="email" placeholder="Email" />
+          <Field component="select" name="color">
+            <option value="red">Red</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+          </Field>
+          <Field name="firstName" component={CustomInputComponent} />
+          <Field
+            name="lastName"
+            render={({ field /* _form */ }) => (
+              <input {...field} placeholder="lastName" />
+            )}
+          />
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    />
+  </div>
+);
+
+const CustomInputComponent = ({
+  field, // { name, value, onChange, onBlur }
+  form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
+  ...props
+}) => (
+  <div>
+    <input type="text" {...field} {...props} />
+    {touched[field.name] &&
+      errors[field.name] && <div className="error">{errors[field.name]}</div>}
+  </div>
+);
+```
+
+#### Props
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+---
+
+# Reference
+
+## Props
+
+### `children`
+
+`children?: React.ReactNode | ((props: FieldProps) => React.ReactNode)`
+
+Either JSX elements or callback function. Same as `render`.
+
+```jsx
+// Children can be JSX elements
+<Field name="color" component="select" placeholder="Favorite Color">
+  <option value="red">Red</option>
+  <option value="green">Green</option>
+  <option value="blue">Blue</option>
+</Field>
+
+// Or a callback function
+<Field name="firstName">
+{({ field, form }) => (
+  <div>
+    <input type="text" {...field} placeholder="First Name"/>
+    {touched[field.name] &&
+      errors[field.name] && <div className="error">{errors[field.name]}</div>}
+  </div>
+)}
+</Field>
+```
+
+### `component`
+
+`component?: string | React.ComponentType<FieldProps>`
+
+Either a React component or the name of an HTML element to render. That is, one of the following:
+
+* `input`
+* `select`
+* `textarea`
+* A custom React Component
+
+Custom React Components will be passed `FieldProps` which is same `render` prop parameters of `<Field render>` plus any other props passed to directly to `<Field>`.
+
+Default is `'input'` (so an `<input>` is rendered by default)
+
+```jsx
+// Renders an HTML <input> by default
+<Field name="lastName" placeholder="Last Name"/>
+
+// Renders an HTML <select>
+<Field name="color" component="select" placeholder="Favorite Color">
+  <option value="red">Red</option>
+  <option value="green">Green</option>
+  <option value="blue">Blue</option>
+</Field>
+
+// Renders a CustomInputComponent
+<Field name="firstName" component={CustomInputComponent} placeholder="First Name"/>
+
+const CustomInputComponent = ({
+  field, // { name, value, onChange, onBlur }
+  form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
+  ...props
+}) => (
+  <div>
+    <input type="text" {...field} {...props} />
+    {touched[field.name] &&
+      errors[field.name] && <div className="error">{errors[field.name]}</div>}
+  </div>
+);
+```
+
+### `innerRef`
+
+`innerRef?: (el: React.HTMLElement<any> => void)`
+
+When you are **not** using a custom component and you need to access the underlying DOM node created by `Field` (e.g. to call `focus`), pass the callback to the `innerRef` prop instead.
+
+### `name`
+
+`name: string`
+**Required**
+
+A field's name in Formik state. To access nested objects or arrays, name can also accept lodash-like dot path like `social.facebook` or `friends[0].firstName`
+
+### `render`
+
+`render?: (props: FieldProps) => React.ReactNode`
+
+A function that returns a React.
+
+```jsx
+// Renders an HTML <input> by default
+<Field name="lastName" placeholder="Last Name"/>
+
+// Renders an HTML <select>
+<Field name="color" component="select" placeholder="Favorite Color">
+  <option value="red">Red</option>
+  <option value="green">Green</option>
+  <option value="blue">Blue</option>
+</Field>
+
+// Renders a CustomInputComponent
+<Field name="firstName" component={CustomInputComponent} placeholder="First Name"/>
+
+const CustomInputComponent = ({
+  field, // { name, value, onChange, onBlur }
+  form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
+  ...props
+}) => (
+  <div>
+    <input type="text" {...field} {...props} />
+    {touched[field.name] &&
+      errors[field.name] && <div className="error">{errors[field.name]}</div>}
+  </div>
+);
+```
+
+### `validate`
+
+`validate?: (value: any) => undefined | string | Promise<any>`
+
+You can run independent field-level validations by passing a function to the
+`validate` prop. The function will respect the `validateOnBlur` and
+`validateOnChange` config/props specified in the `<Field>'s` parent `<Formik>`
+/ `withFormik`. This function can be either be synchronous or asynchronous:
+
+* Sync: if invalid, return a `string` containing the error message or
+  return `undefined`.
+
+* Async: return a Promise that throws a `string` containing the error message.
+  This works like Formik's `validate`, but instead of returning an `errors`
+  object, it's just a `string`.
+
+```js
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+
+// Synchronous validation function
+const validate = value => {
+  let errorMessage;
+  if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+    errorMessage = 'Invalid email address';
+  }
+  return errorMessage;
+};
+
+// Async validation function
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+const validateAsync = value => {
+  return sleep(2000).then(() => {
+    if (['admin', 'null', 'god'].includes(value)) {
+      throw 'Nice try';
+    }
+  });
+};
+
+// example usage
+const MyForm = () => (
+  <Formik
+    initialValues={{ email: '', username: '' }}
+    onSubmit={values => alert(JSON.stringify(values, null, 2))}
+  >
+    {({ errors, touched }) => (
+      <Form>
+        <Field validate={validate} name="email" type="email" />
+        {errors.email && touched.email ? <div>{errors.email}</div> : null}
+        <Field validate={validateAsync} name="username" />
+        {errors.username && touched.username ? (
+          <div>{errors.username}</div>
+        ) : null}
+        <button type="submit">Submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+```
+
+Note: To allow for i18n libraries, the TypeScript typings for `validate` are
+slightly relaxed and allow you to return a `Function` (e.g. `i18n('invalid')`).
diff --git a/website/versioned_docs/version-1.2.0/api/fieldarray.md b/website/versioned_docs/version-1.2.0/api/fieldarray.md
new file mode 100644
index 0000000..605c141
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/fieldarray.md
@@ -0,0 +1,253 @@
+---
+id: version-1.2.0-fieldarray
+title: <FieldArray />
+original_id: fieldarray
+---
+
+`<FieldArray />` is a component that helps with common array/list manipulations. You pass it a `name` property with the path to the key within `values` that holds the relevant array. `<FieldArray />` will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage `touched` for you.
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field, FieldArray } from 'formik';
+
+// Here is an example of a form with an editable list.
+// Next to each input are buttons for insert and remove.
+// If the list is empty, there is a button to add an item.
+export const FriendList = () => (
+  <div>
+    <h1>Friend List</h1>
+    <Formik
+      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
+      onSubmit={values =>
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+        }, 500)
+      }
+      render={({ values }) => (
+        <Form>
+          <FieldArray
+            name="friends"
+            render={arrayHelpers => (
+              <div>
+                {values.friends && values.friends.length > 0 ? (
+                  values.friends.map((friend, index) => (
+                    <div key={index}>
+                      <Field name={`friends.${index}`} />
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
+                      >
+                        -
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.insert(index, '')} // insert an empty string at a position
+                      >
+                        +
+                      </button>
+                    </div>
+                  ))
+                ) : (
+                  <button type="button" onClick={() => arrayHelpers.push('')}>
+                    {/* show this when user has removed all friends from the list */}
+                    Add a friend
+                  </button>
+                )}
+                <div>
+                  <button type="submit">Submit</button>
+                </div>
+              </div>
+            )}
+          />
+        </Form>
+      )}
+    />
+  </div>
+);
+```
+
+### `name: string`
+
+The name or path to the relevant key in [`values`].
+
+### `validateOnChange?: boolean`
+
+Default is `true`. Determines if form validation should or should not be run _after_ any array manipulations.
+
+## FieldArray Array of Objects
+
+You can also iterate through an array of objects, by following a convention of `object[index]property` or `object.index.property` for the name attributes of `<Field />` or `<input />` elements in `<FieldArray />`.
+
+```jsx
+<Form>
+  <FieldArray
+    name="friends"
+    render={arrayHelpers => (
+      <div>
+        {values.friends.map((friend, index) => (
+          <div key={index}>
+            <Field name={`friends[${index}]name`} />
+            <Field name={`friends.${index}.age`} /> // both these conventions do
+            the same
+            <button type="button" onClick={() => arrayHelpers.remove(index)}>
+              -
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={() => arrayHelpers.push({ name: '', age: '' })}
+        >
+          +
+        </button>
+      </div>
+    )}
+  />
+</Form>
+```
+
+## FieldArray Validation Gotchas
+
+Validation can be tricky with `<FieldArray>`.
+
+If you use [`validationSchema`] and your form has array validation requirements (like a min length) as well as nested array field requirements, displaying errors can be tricky. Formik/Yup will show validation errors inside out. For example,
+
+```js
+const schema = Yup.object().shape({
+  friends: Yup.array()
+    .of(
+      Yup.object().shape({
+        name: Yup.string()
+          .min(4, 'too short')
+          .required('Required'), // these constraints take precedence
+        salary: Yup.string()
+          .min(3, 'cmon')
+          .required('Required'), // these constraints take precedence
+      })
+    )
+    .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
+    .min(3, 'Minimum of 3 friends'),
+});
+```
+
+Since Yup and your custom validation function should always output error messages as strings, you'll need to sniff whether your nested error is an array or a string when you go to display it.
+
+So...to display `'Must have friends'` and `'Minimum of 3 friends'` (our example's array validation contstraints)...
+
+**_Bad_**
+
+```js
+// within a `FieldArray`'s render
+const FriendArrayErrors = errors =>
+  errors.friends ? <div>{errors.friends}</div> : null; // app will crash
+```
+
+**_Good_**
+
+```js
+// within a `FieldArray`'s render
+const FriendArrayErrors = errors =>
+  typeof errors.friends === 'string' ? <div>{errors.friends}</div> : null;
+```
+
+For the nested field errors, you should assume that no part of the object is defined unless you've checked for it. Thus, you may want to do yourself a favor and make a custom `<ErrorMessage />` component that looks like this:
+
+```jsx
+import { Field, getIn } from 'formik';
+
+const ErrorMessage = ({ name }) => (
+  <Field
+    name={name}
+    render={({ form }) => {
+      const error = getIn(form.errors, name);
+      const touch = getIn(form.touched, name);
+      return touch && error ? error : null;
+    }}
+  />
+);
+
+// Usage
+<ErrorMessage name="friends[0].name" />; // => null, 'too short', or 'required'
+```
+
+_NOTE_: In Formik v0.12 / 1.0, a new `meta` prop may be added to `Field` and `FieldArray` that will give you relevant metadata such as `error` & `touch`, which will save you from having to use Formik or lodash's getIn or checking if the path is defined on your own.
+
+## FieldArray Helpers
+
+The following methods are made available via render props.
+
+* `push: (obj: any) => void`: Add a value to the end of an array
+* `swap: (indexA: number, indexB: number) => void`: Swap two values in an array
+* `move: (from: number, to: number) => void`: Move an element in an array to another index
+* `insert: (index: number, value: any) => void`: Insert an element at a given index into the array
+* `unshift: (value: any) => number`: Add an element to the beginning of an array and return its length
+* `remove<T>(index: number): T | undefined`: Remove an element at an index of an array and return it
+* `pop<T>(): T | undefined`: Remove and return value from the end of the array
+
+## FieldArray render methods
+
+There are three ways to render things with `<FieldArray />`
+
+* `<FieldArray name="..." component>`
+* `<FieldArray name="..." render>`
+
+### `render: (arrayHelpers: ArrayHelpers) => React.ReactNode`
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field, FieldArray } from 'formik'
+
+export const FriendList = () => (
+  <div>
+    <h1>Friend List</h1>
+    <Formik
+      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
+      onSubmit={...}
+      render={formikProps => (
+        <FieldArray
+          name="friends"
+          render={({ move, swap, push, insert, unshift, pop }) => (
+            <Form>
+              {/*... use these however you want */}
+            </Form>
+          )}
+        />
+    />
+  </div>
+);
+```
+
+### `component: React.ReactNode`
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field, FieldArray } from 'formik'
+
+
+export const FriendList = () => (
+  <div>
+    <h1>Friend List</h1>
+    <Formik
+      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
+      onSubmit={...}
+      render={formikProps => (
+        <FieldArray
+          name="friends"
+          component={MyDynamicForm}
+        />
+    />
+  </div>
+);
+
+
+// In addition to the array helpers, Formik state and helpers
+// (values, touched, setXXX, etc) are provided through a `form`
+// prop
+export const MyDynamicForm = ({
+  move, swap, push, insert, unshift, pop, form
+}) => (
+ <Form>
+  {/**  whatever you need to do */}
+ </Form>
+);
+```
diff --git a/website/versioned_docs/version-1.2.0/api/form.md b/website/versioned_docs/version-1.2.0/api/form.md
new file mode 100644
index 0000000..cca87b0
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/form.md
@@ -0,0 +1,16 @@
+---
+id: version-1.2.0-form
+title: <Form />
+original_id: form
+---
+
+Form is a small wrapper around an HTML `<form>` element that automatically hooks into Formik's `handleSubmit`. All other props are passed directly through to the DOM node.
+
+```jsx
+// so...
+<Form />
+
+// is identical to this...
+<form onSubmit={formikProps.handleSubmit} {...props} />
+```
+
diff --git a/website/versioned_docs/version-1.2.0/api/formik.md b/website/versioned_docs/version-1.2.0/api/formik.md
new file mode 100644
index 0000000..f618e19
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/formik.md
@@ -0,0 +1,379 @@
+---
+id: version-1.2.0-formik
+title: <Formik />
+original_id: formik
+---
+
+`<Formik>` is a component that helps you with building forms. It uses a render
+props pattern made popular by libraries like React Motion and React Router.
+
+## Example
+
+```jsx
+import React from 'react';
+import { Formik } from 'formik';
+
+const BasicExample = () => (
+  <div>
+    <h1>My Form</h1>
+    <Formik
+      initialValues={{ name: 'jared' }}
+      onSubmit={(values, actions) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          actions.setSubmitting(false);
+        }, 1000);
+      }}
+      render={props => (
+        <form onSubmit={props.handleSubmit}>
+          <input
+            type="text"
+            onChange={props.handleChange}
+            onBlur={props.handleBlur}
+            value={props.values.name}
+            name="name"
+          />
+          {props.errors.name && <div id="feedback">{props.errors.name}</div>}
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    />
+  </div>
+);
+```
+
+#### Props
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+---
+
+# Reference
+
+## Props
+
+### Formik render methods and props
+
+There are three ways to render things with `<Formik />`
+
+* `<Formik component>`
+* `<Formik render>`
+* `<Formik children>`
+
+All three render methods will be passed the same props:
+
+#### `dirty: boolean`
+
+Returns `true` if values are not deeply equal from initial values, `false` otherwise.
+`dirty` is a readonly computed property and should not be mutated directly.
+
+#### `errors: { [field: string]: string }`
+
+Form validation errors. Should match the shape of your form's `values` defined
+in `initialValues`. If you are using `validationSchema` (which you should be),
+keys and shape will match your schema exactly. Internally, Formik transforms raw
+[Yup validation errors](https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string)
+on your behalf. If you are using `validate`, then that function will determine
+the `errors` objects shape.
+
+#### `handleBlur: (e: any) => void`
+
+`onBlur` event handler. Useful for when you need to track whether an input has
+been `touched` or not. This should be passed to `<input onBlur={handleBlur} ... />`
+
+DOM-only. Use `setFieldTouched` in React Native.
+
+#### `handleChange: (e: React.ChangeEvent<any>) => void`
+
+General input change event handler. This will update the `values[key]` where
+`key` is the event-emitting input's `name` attribute. If the `name` attribute is
+not present, `handleChange` will look for an input's `id` attribute. Note:
+"input" here means all HTML inputs.
+
+DOM-only. Use `setFieldValue` in React Native.
+
+#### `handleReset: () => void`
+
+Reset handler. Will reset the form to its initial state. This should be passed
+to `<button onClick={handleReset}>...</button>`
+
+#### `handleSubmit: (e: React.FormEvent<HTMLFormEvent>) => void`
+
+Submit handler. This should be passed to `<form onSubmit={props.handleSubmit}>...</form>`. To learn more about the submission process, see [How Form Submission Works](#how-form-submission-works).
+
+#### `isSubmitting: boolean`
+
+Submitting state of the form. Returns `true` if submission is in progress and `false` otherwise. IMPORTANT: Formik will set this to `true` as soon as submission is _attempted_. To learn more about the submission process, see [How Form Submission Works](#how-form-submission-works).
+
+#### `isValid: boolean`
+
+Returns `true` if the there are no `errors`, or the result of
+`isInitialValid` the form if is in "pristine" condition (i.e. not `dirty`)).
+
+#### `isValidating: boolean`
+
+Returns `true` if Formik is running any validation function, `false` otherwise. To learn more about what happens with `isValidating` during the submission process, see [How Form Submission Works](#how-form-submission-works).
+
+#### `resetForm: (nextValues?: Values) => void`
+
+Imperatively reset the form. This will clear `errors` and `touched`, set
+`isSubmitting` to `false`, `isValidating` to `false`, and rerun `mapPropsToValues` with the current
+`WrappedComponent`'s `props` or what's passed as an argument. The latter is
+useful for calling `resetForm` within `componentWillReceiveProps`.
+
+#### `setErrors: (fields: { [field: string]: string }) => void`
+
+Set `errors` imperatively.
+
+#### `setFieldError: (field: string, errorMsg: string) => void`
+
+Set the error message of a field imperatively. `field` should match the key of
+`errors` you wish to update. Useful for creating custom input error handlers.
+
+#### `setFieldTouched: (field: string, isTouched: boolean, shouldValidate?: boolean) => void`
+
+Set the touched state of a field imperatively. `field` should match the key of
+`touched` you wish to update. Useful for creating custom input blur handlers. Calling this method will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a third argument as `false`.
+
+#### `submitForm: () => void`
+
+Trigger a form submission.
+
+#### `submitCount: number`
+
+Number of times user tried to submit the form. Increases when `handleSubmit`(#handlesubmit-values-values-formikbag-formikbag--void) is called, resets after calling
+`handleReset`(#handlereset---void). `submitCount` is readonly computed property and should not be mutated directly.
+
+#### `setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void`
+
+Set the value of a field imperatively. `field` should match the key of
+`values` you wish to update. Useful for creating custom input change handlers. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a third argument as `false`.
+
+#### `setStatus: (status?: any) => void`
+
+Set a top-level `status` to anything you want imperatively. Useful for
+controlling arbitrary top-level state related to your form. For example, you can
+use it to pass API responses back into your component in `handleSubmit`.
+
+#### `setSubmitting: (isSubmitting: boolean) => void`
+
+Set `isSubmitting` imperatively.
+
+#### `setTouched: (fields: { [field: string]: boolean }) => void`
+
+Set `touched` imperatively.
+
+#### `setValues: (fields: { [field: string]: any }) => void`
+
+Set `values` imperatively.
+
+#### `status?: any`
+
+A top-level status object that you can use to represent form state that can't
+otherwise be expressed/stored with other methods. This is useful for capturing
+and passing through API responses to your inner component.
+
+`status` should only be modifed by calling
+`setStatus: (status?: any) => void`(#setstatus-status-any--void)
+
+#### `touched: { [field: string]: boolean }`
+
+Touched fields. Each key corresponds to a field that has been touched/visited.
+
+#### `values: { [field: string]: any }`
+
+Your form's values. Will have the shape of the result of `mapPropsToValues`
+(if specified) or all props that are not functions passed to your wrapped
+component.
+
+#### `validateForm: (values?: any) => Promise<FormikErrors<Values>>`
+
+Imperatively call your `validate` or `validateSchema` depending on what was specified. You can optionally pass values to validate against and this modify Formik state accordingly, otherwise this will use the current `values` of the form.
+
+#### `validateField: (field: string) => void`
+
+Imperatively call field's `validate` function if specified for given field. Formik will use the current field value.
+
+### `component`
+
+```jsx
+<Formik component={ContactForm} />;
+
+const ContactForm = ({
+  handleSubmit,
+  handleChange,
+  handleBlur,
+  values,
+  errors,
+}) => (
+  <form onSubmit={handleSubmit}>
+    <input
+      type="text"
+      onChange={handleChange}
+      onBlur={handleBlur}
+      value={values.name}
+      name="name"
+    />
+    {errors.name && <div>{errors.name}</div>}
+    <button type="submit">Submit</button>
+  </form>
+};
+```
+
+**Warning:** `<Formik component>` takes precendence over `<Formik render>` so
+don’t use both in the same `<Formik>`.
+
+### `render: (props: FormikProps<Values>) => ReactNode`
+
+```jsx
+<Formik render={props => <ContactForm {...props} />} />
+
+<Formik
+  render={({ handleSubmit, handleChange, handleBlur, values, errors }) => (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={values.name}
+        name="name"
+      />
+      {errors.name &&
+        <div>
+          {errors.name}
+        </div>}
+      <button type="submit">Submit</button>
+    </form>
+  )}
+/>
+```
+
+### `children: func`
+
+```jsx
+<Formik children={props => <ContactForm {...props} />} />
+
+// or...
+
+<Formik>
+  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        value={values.name}
+        name="name"
+      />
+      {errors.name &&
+        <div>
+          {errors.name}
+        </div>}
+      <button type="submit">Submit</button>
+    </form>
+  )}
+</Formik>
+```
+
+### `enableReinitialize?: boolean`
+
+Default is `false`. Control whether Formik should reset the form if
+`initialValues` changes (using deep equality).
+
+### `isInitialValid?: boolean`
+
+Default is `false`. Control the initial value of `isValid` prop prior to
+mount. You can also pass a function. Useful for situations when you want to
+enable/disable a submit and reset buttons on initial mount.
+
+### `initialValues?: Values`
+
+Initial field values of the form, Formik will make these values available to
+render methods component as ` props.values``values `.
+
+Even if your form is empty by default, you must initialize all fields with
+initial values otherwise React will throw an error saying that you have changed
+an input from uncontrolled to controlled.
+
+Note: `initialValues` not available to the higher-order component, use
+`mapPropsToValues` instead.
+
+### `onReset?: (values: Values, formikBag: FormikBag) => void`
+
+Your optional form reset handler. It is passed your forms `values` and the
+"FormikBag".
+
+### `onSubmit: (values: Values, formikBag: FormikBag) => void`
+
+Your form submission handler. It is passed your forms `values` and the
+"FormikBag", which includes an object containing a subset of the
+[injected props and methods](#injected-props-and-methods) (i.e. all the methods
+with names that start with `set<Thing>` + `resetForm`) and any props that were
+passed to the the wrapped component.
+
+Note: `errors`, `touched`, `status` and all event handlers are NOT
+included in the `FormikBag`.
+
+### `validate?: (values: Values) => FormikErrors<Values> | Promise<any>`
+
+_Note: I suggest using `validationSchema` and Yup for validation. However,
+`validate` is a dependency-free, straightforward way to validate your forms._
+
+Validate the form's `values` with function. This function can either be:
+
+1.  Synchronous and return an `errors` object.
+
+```js
+// Synchronous validation
+const validate = (values, props) => {
+  let errors = {};
+
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+
+  //...
+
+  return errors;
+};
+```
+
+* Asynchronous and return a Promise that's error in an `errors` object
+
+```js
+// Async Validation
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+const validate = (values, props) => {
+  return sleep(2000).then(() => {
+    let errors = {};
+    if (['admin', 'null', 'god'].includes(values.username)) {
+      errors.username = 'Nice try';
+    }
+    // ...
+    if (Object.keys(errors).length) {
+      throw errors;
+    }
+  });
+};
+```
+
+### `validateOnBlur?: boolean`
+
+Default is `true`. Use this option to run validations on `blur` events. More
+specifically, when either `handleBlur`, `setFieldTouched`, or `setTouched`
+are called.
+
+### `validateOnChange?: boolean`
+
+Default is `true`. Use this option to tell Formik to run validations on `change`
+events and `change`-related methods. More specifically, when either
+`handleChange`, `setFieldValue`, or `setValues` are called.
+
+### `validationSchema?: Schema | (() => Schema)`
+
+[A Yup schema](https://github.com/jquense/yup) or a function that returns a Yup
+schema. This is used for validation. Errors are mapped by key to the inner
+component's `errors`. Its keys should match those of `values`.
diff --git a/website/versioned_docs/version-1.2.0/api/withFormik.md b/website/versioned_docs/version-1.2.0/api/withFormik.md
new file mode 100644
index 0000000..1299d25
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/api/withFormik.md
@@ -0,0 +1,137 @@
+---
+id: version-1.2.0-withFormik
+title: withFormik()
+original_id: withFormik
+---
+
+Create a higher-order React component class that passes props and form handlers
+(the "`FormikBag`") into your component derived from supplied options.
+
+## `options`
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+### `displayName?: string`
+
+When your inner form component is a stateless functional component, you can use
+the `displayName` option to give the component a proper name so you can more
+easily find it in
+[React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).
+If specified, your wrapped form will show up as `Formik(displayName)`. If
+omitted, it will show up as `Formik(Component)`. This option is not required for
+class components (e.g. `class XXXXX extends React.Component {..}`).
+
+### `enableReinitialize?: boolean`
+
+Default is `false`. Control whether Formik should reset the form if the wrapped
+component props change (using deep equality).
+
+### `handleSubmit: (values: Values, formikBag: FormikBag) => void`
+
+Your form submission handler. It is passed your forms `values` and the
+"FormikBag", which includes an object containing a subset of the
+[injected props and methods](#injected-props-and-methods) (i.e. all the methods
+with names that start with `set<Thing>` + `resetForm`) and any props that were
+passed to the the wrapped component.
+
+#### The "FormikBag":
+
+* `props` (props passed to the wrapped component)
+* `resetForm`
+* `setErrors`
+* `setFieldError`
+* `setFieldTouched`
+* `setFieldValue`
+* `setStatus`
+* `setSubmitting`
+* `setTouched`
+* `setValues`
+
+Note: `errors`, `touched`, `status` and all event handlers are NOT
+included in the `FormikBag`.
+
+### `isInitialValid?: boolean | (props: Props) => boolean`
+
+Default is `false`. Control the initial value of `isValid` prop prior to
+mount. You can also pass a function. Useful for situations when you want to
+enable/disable a submit and reset buttons on initial mount.
+
+### `mapPropsToValues?: (props: Props) => Values`
+
+If this option is specified, then Formik will transfer its results into
+updatable form state and make these values available to the new component as
+`props.values`. If `mapPropsToValues` is not specified, then Formik
+will map all props that are not functions to the inner component's
+`props.values`. That is, if you omit it, Formik will only pass
+`props` where `typeof props[k] !== 'function'`, where `k` is some key.
+
+Even if your form is not receiving any props from its parent, use
+`mapPropsToValues` to initialize your forms empty state.
+
+### `validate?: (values: Values, props: Props) => FormikErrors<Values> | Promise<any>`
+
+_Note: I suggest using `validationSchema` and Yup for validation. However,
+`validate` is a dependency-free, straightforward way to validate your forms._
+
+Validate the form's `values` with function. This function can either be:
+
+1.  Synchronous and return an `errors` object.
+
+```js
+// Synchronous validation
+const validate = (values, props) => {
+  let errors = {};
+
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+
+  //...
+
+  return errors;
+};
+```
+
+* Asynchronous and return a Promise that's error is an `errors` object
+
+```js
+// Async Validation
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+const validate = (values, props) => {
+  return sleep(2000).then(() => {
+    let errors = {};
+    if (['admin', 'null', 'god'].includes(values.username)) {
+      errors.username = 'Nice try';
+    }
+    // ...
+    if (Object.keys(errors).length) {
+      throw errors;
+    }
+  });
+};
+```
+
+### `validateOnBlur?: boolean`
+
+Default is `true`. Use this option to run validations on `blur` events. More
+specifically, when either `handleBlur`, `setFieldTouched`, or `setTouched`
+are called.
+
+### `validateOnChange?: boolean`
+
+Default is `true`. Use this option to tell Formik to run validations on `change`
+events and `change`-related methods. More specifically, when either
+`handleChange`, `setFieldValue`, or `setValues` are called.
+
+### `validationSchema?: Schema | ((props: Props) => Schema)`
+
+[A Yup schema](https://github.com/jquense/yup) or a function that returns a Yup
+schema. This is used for validation. Errors are mapped by key to the inner
+component's `errors`. Its keys should match those of `values`.
+
+## Injected props and methods
+
+These are identical to the props of [`<Formik render={props => ...} />`](formik#formik-render-methods-and-props)
diff --git a/website/versioned_docs/version-1.2.0/guides/arrays.md b/website/versioned_docs/version-1.2.0/guides/arrays.md
new file mode 100644
index 0000000..24fe0b7
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/guides/arrays.md
@@ -0,0 +1,68 @@
+---
+id: version-1.2.0-arrays
+title: Arrays and Nested Objects
+original_id: arrays
+---
+
+Formik has support for nested objects and arrays out of the box. These 2 subjects are somewhat related because they both leverage the same syntax.
+
+## Nested Objects
+
+The `name` props in Formik can use lodash-like dot paths to reference nested Formik values. This means that you do not need to flatten out your form's values anymore.
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+
+export const NestedExample = () => (
+  <div>
+    <h1>Social Profiles</h1>
+    <Formik
+      initialValues={{
+        social: {
+          facebook: '',
+          twitter: '',
+        },
+      }}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      <Field name="social.facebook" />
+      <Field name="social.twitter" />
+      <button type="submit">Submit</button>
+    </Formik>
+  </div>
+);
+```
+
+## Arrays
+
+Formik also has support for arrays and arrays of objects out of the box. Using lodash-like bracket syntax for `name` string you can quickly build fields for items in a list.
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+
+export const BasicArrayExample = () => (
+  <div>
+    <h1>Friends</h1>
+    <Formik
+      initialValues={{
+        friends: ['jared', 'ian'],
+      }}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      <Field name="friends[0]" />
+      <Field name="friends[1]" />
+      <button type="submit">Submit</button>
+    </Formik>
+  </div>
+);
+```
+
+For more information around manipulating (add/remove/etc) items in lists, see the API reference section on the `<FieldArray>` component.
diff --git a/website/versioned_docs/version-1.2.0/guides/form-submission.md b/website/versioned_docs/version-1.2.0/guides/form-submission.md
new file mode 100644
index 0000000..c480742
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/guides/form-submission.md
@@ -0,0 +1,58 @@
+---
+id: version-1.2.0-form-submission
+title: Form Submission
+original_id: form-submission
+---
+
+## Submission Phases
+
+To submit a form in Formik, you need to somehow fire off the provided `handleSubmit(e)` or `submitForm` prop. When you call either of these methods, Formik will execute the following _(pseudo code)_ each time:
+
+### Pre-submit
+
+* Touch all fields
+* Set `isSubmitting` to `true`
+* Increment `submitCount` + 1
+
+### Validation
+
+* Set `isValidating` to `true`
+* Run all field-level validations, `validate`, and `validationSchema` asynchronously and deeply merge results
+* Are there any errors?
+  * Yes: Abort submission. Set `isValidating` to `false`, set `errors`, set `isSubmitting` to `false`
+  * No: Set `isValidating` to `false`, proceed to "Submission"
+
+### Submission
+
+* Proceed with running your submission handler (i.e.`onSubmit` or `handleSubmit`)
+* _you call `setSubmitting(false)`_ in your handler to finish the cycle
+
+## Frequently Asked Questions
+
+<details>
+<summary>How do I determine if my submission handler is executing?</summary>
+
+If `isValidating` is `false` and `isSubmitting` is `true`.
+
+</details>
+
+<details>
+<summary>Why does Formik touch all fields before submit?</summary>
+
+It is common practice to only show an input's errors in the UI if it has been visited (a.k.a "touched"). Before submitting a form, Formik touches all fields so that all errors that may have been hidden will now be visible.
+
+</details>
+
+<details>
+<summary>How do I protect against double submits?</summary>
+
+Disable whatever is triggering submission if `isSubmitting` is `true`.
+
+</details>
+
+<details>
+<summary>How do I know when my form is validating before submit?</summary>
+
+If `isValidating` is `true` and `isSubmitting` is `true`.
+
+</details>
diff --git a/website/versioned_docs/version-1.2.0/guides/react-native.md b/website/versioned_docs/version-1.2.0/guides/react-native.md
new file mode 100644
index 0000000..917f4ce
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/guides/react-native.md
@@ -0,0 +1,48 @@
+---
+id: version-1.2.0-react-native
+title: React Native
+original_id: react-native
+---
+
+**Formik is 100% compatible with React Native and React Native Web.** However,
+because of differences between ReactDOM's and React Native's handling of forms
+and text input, there are some differences to be aware of. This section will walk
+you through them and what we consider to be best practices.
+
+### The gist
+
+Before going any further, here's a super minimal gist of how to use Formik with
+React Native that demonstrates the key differences:
+
+```jsx
+// Formik x React Native example
+import React from 'react';
+import { Button, TextInput, View } from 'react-native';
+import { Formik } from 'formik';
+
+export const MyReactNativeForm = props => (
+  <Formik
+    initialValues={{ email: '' }}
+    onSubmit={values => console.log(values)}
+  >
+    {({ values, handleChange, handleBlur }) => (
+      <View>
+        <TextInput
+          onChangeText={props.handleChange('email')}
+          onBlur={props.handleBlur('email')}
+          value={props.values.email}
+        />
+        <Button onPress={props.handleSubmit} title="Submit" />
+      </View>
+    )}
+  </Formik>
+);
+```
+
+As you can see above, the notable differences between using Formik with React
+DOM and React Native are:
+
+1.  Formik's `props.handleSubmit` is passed to a `<Button onPress={...} />`
+    instead of HTML `<form onSubmit={...} />` component (since there is no
+    `<form />` element in React Native).
+2.  `<TextInput />` uses Formik's `props.handleChange(fieldName)` and `handleBlur(fieldName)` instead of directly assigning the callbacks to props, because we have to get the `fieldName` from somewhere and with ReactNative we can't get it automatically like for web (using input name attribute). You can also use `setFieldValue(fieldName, value)` and `setTouched(fieldName, bool)` as an alternative.
diff --git a/website/versioned_docs/version-1.2.0/guides/typescript.md b/website/versioned_docs/version-1.2.0/guides/typescript.md
new file mode 100644
index 0000000..4a97ffa
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/guides/typescript.md
@@ -0,0 +1,129 @@
+---
+id: version-1.2.0-typescript
+title: TypeScript
+original_id: typescript
+---
+
+[![TypeScript Types](https://img.shields.io/npm/types/formik.svg)](https://npm.im/formik)
+
+The Formik source code is written in TypeScript, so you can rest easy that Formik's
+types will always be up-to-date. As a mental model, Formik's type signature(s) is/are very
+similar to React Router 4's `<Route>`.
+
+#### Render props (`<Formik />` and `<Field />`)
+
+```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>
+  );
+};
+```
+
+#### `withFormik()`
+
+```typescript
+import React from 'react';
+import * as Yup from 'yup';
+import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
+
+// Shape of form values
+interface FormValues {
+  email: string;
+  password: string;
+}
+
+interface OtherProps {
+  message: string;
+}
+
+// Aside: You may see InjectedFormikProps<OtherProps, FormValues> instead of what comes below in older code.. InjectedFormikProps was artifact of when Formik only exported a HoC. It is also less flexible as it MUST wrap all props (it passes them through).
+const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
+  const { touched, errors, isSubmitting, message } = props;
+  return (
+    <Form>
+      <h1>{message}</h1>
+      <Field type="email" name="email" />
+      {touched.email && errors.email && <div>{errors.email}</div>}
+
+      <Field type="password" name="password" />
+      {touched.password && errors.password && <div>{errors.password}</div>}
+
+      <button type="submit" disabled={isSubmitting}>
+        Submit
+      </button>
+    </Form>
+  );
+};
+
+// The type of props MyForm receives
+interface MyFormProps {
+  initialEmail?: string;
+  message: string; // if this passed all the way through you might do this or make a union type
+}
+
+// Wrap our form with the using withFormik HoC
+const MyForm = withFormik<MyFormProps, FormValues>({
+  // Transform outer props into form values
+  mapPropsToValues: props => {
+    return {
+      email: props.initialEmail || '',
+      password: '',
+    };
+  },
+
+  // Add a custom validation function (this can be async too!)
+  validate: (values: FormValues) => {
+    let errors: FormikErrors = {};
+    if (!values.email) {
+      errors.email = 'Required';
+    } else if (!isValidEmail(values.email)) {
+      errors.email = 'Invalid email address';
+    }
+    return errors;
+  },
+
+  handleSubmit: values => {
+    // do submitting things
+  },
+})(InnerForm);
+
+// Use <MyForm /> wherevs
+const Basic = () => (
+  <div>
+    <h1>My App</h1>
+    <p>This can be anywhere in your application</p>
+    <MyForm message="Sign up" />
+  </div>
+);
+
+export default Basic;
+```
diff --git a/website/versioned_docs/version-1.2.0/guides/validation.md b/website/versioned_docs/version-1.2.0/guides/validation.md
new file mode 100644
index 0000000..04b26c2
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/guides/validation.md
@@ -0,0 +1,309 @@
+---
+id: version-1.2.0-validation
+title: Validation
+original_id: validation
+---
+
+Formik is designed to manage forms with complex validation with ease. Formik supports synchronous and asynchronous
+form-level and field-level validation. Furthermore, it comes with baked-in support for schema-based form-level validation through Yup. This guide will describe the ins and outs of all of the above.
+
+<AUTOGENERATED_TABLE_OF_CONTENTS>
+
+## Flavors of Validation
+
+### Form-level Validation
+
+Form-level validation is useful because you have complete access to all of your form's `values` and props whenever the function runs, so you can validate dependent fields at the same time.
+
+There are 2 ways to do form-level validation with Formik:
+
+* `<Formik validate>` and `withFormik({ validate: ... })`
+* `<Formik validationSchema>` and `withFormik({ validationSchema: ... })`
+
+#### `validate`
+
+`<Formik>` and `withFormik()` take prop/option called `validate` that accepts either a synchronous or asynchronous function.
+
+```js
+// Synchronous validation
+const validate = (values, props) => {
+  let errors = {};
+
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+
+  //...
+
+  return errors;
+};
+
+// Async Validation
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+const validate = (values, props) => {
+  return sleep(2000).then(() => {
+    let errors = {};
+    if (['admin', 'null', 'god'].includes(values.username)) {
+      errors.username = 'Nice try';
+    }
+    // ...
+    if (Object.keys(errors).length) {
+      throw errors;
+    }
+  });
+};
+```
+
+For more information about `<Formik validate>`, see the API reference.
+
+#### `validationSchema`
+
+As you can see above, validation is left up to you. Feel free to write your own
+validators or use a 3rd party library. At The Palmer Group, we use
+[Yup](https://github.com/jquense/yup) for object schema validation. It has an
+API that's pretty similar [Joi](https://github.com/hapijs/joi) and
+[React PropTypes](https://github.com/facebook/prop-types) but is small enough
+for the browser and fast enough for runtime usage. Because we :heart: Yup sooo
+much, Formik has a special config option / prop for Yup object schemas called `validationSchema` which will automatically transform Yup's validation errors into a pretty object whose keys match `values` and `touched`. This symmetry makes it easy to manage business logic around error messages.
+
+To add Yup to your project, install it from NPM.
+
+```sh
+npm install yup --save
+# typescript users should add the @types/yup
+```
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from "yup";
+
+const SignupSchema = Yup.object().shape({
+  firstName: Yup.string()
+    .min(2, 'Too Short!')
+    .max(50, 'Too Long!')
+    .required('Required'),
+  lastName: Yup.string()
+    .min(2, 'Too Short!')
+    .max(50, 'Too Long!')
+    .required('Required'),
+  email: Yup.string()
+    .email('Invalid email')
+    .required('Required'),
+});
+
+export const ValidationSchemaExample = () => (
+  <div>
+    <h1>Signup</h1>
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+      }}
+      validationSchema={SignupSchema}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      {({ errors, touched }) => (
+        <Form>
+          <Field name="firstName" />
+          {errors.firstName && touched.firstName ? (
+            <div>{errors.firstName}</div>
+          ) : null}
+          <Field name="lastName" />
+          {errors.lastName && touched.lastName ? (
+            <div>{errors.lastName}</div>
+          ) : null}
+          <Field name="email" type="email" />
+          {errors.email && touched.email ? <div>{errors.email}</div> : null}
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+```
+
+For more information about `<Formik validationSchema>`, see the API reference.
+
+### Field-level Validation
+
+#### `validate`
+
+Formik supports field-level validation via the `<Field>`/`<FastField>` components' `validate` prop. This function can be synchronous or asynchronous (return a Promise). It will run after any `onChange` and `onBlur` by default. This behvaior can be altered at the top level `<Formik/>` component using the `validateOnChange` and `validateOnBlur` props respectively. In addition to change/blur, all field-level validations are run at the beginning of a submission attempt and then the results are deeply merged with any top-level validation results.
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from "yup";
+
+function validateEmail(value) {
+  let error;
+  if (!value) {
+    error = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+    error = 'Invalid email address';
+  }
+  return error;
+}
+
+function validateUsername(value) {
+  let error;
+  if (value === 'admin') {
+    error = 'Nice try!';
+  }
+  return error;
+}
+
+export const FieldLevelValidationExample = () => (
+  <div>
+    <h1>Signup</h1>
+    <Formik
+      initialValues={{
+        username: '',
+        email: '',
+      }}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      {({ errors, touched, isValidating }) => (
+        <Form>
+          <Field name="email" validate={validateEmail} />
+          {errors.email && touched.email && <div>{errors.email}</div>}
+
+          <Field name="username" validate={validateUsername} />
+          {errors.username && touched.username && <div>{errors.username}</div>}
+
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+```
+
+### Manually Triggering Validation
+
+You can manually trigger both form-level and field-level validation with Formik using the `validateForm` and `validateField` methods respectively.
+
+```jsx
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import * as Yup from "yup";
+
+function validateEmail(value) {
+  let error;
+  if (!value) {
+    error = 'Required';
+  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
+    error = 'Invalid email address';
+  }
+  return error;
+}
+
+function validateUsername(value) {
+  let error;
+  if (value === 'admin') {
+    error = 'Nice try!';
+  }
+  return error;
+}
+
+export const FieldLevelValidationExample = () => (
+  <div>
+    <h1>Signup</h1>
+    <Formik
+      initialValues={{
+        username: '',
+        email: '',
+      }}
+      onSubmit={values => {
+        // same shape as initial values
+        console.log(values);
+      }}
+    >
+      {({ errors, touched, validateField, validateForm }) => (
+        <Form>
+          <Field name="email" validate={validateEmail} />
+          {errors.email && touched.email && <div>{errors.email}</div>}
+
+          <Field name="username" validate={validateUsername} />
+          {errors.username && touched.username && <div>{errors.username}</div>}
+          {/** Trigger field-level validation
+           imperatively */}
+          <button type="button" onClick={() => validateField('username')}>
+            Check Username
+          </button>
+          {/** Trigger form-level validation
+           imperatively */}
+          <button type="button" onClick={() => validateForm().then(() => console.log(blah)))}>
+            Validate All
+          </button>
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+```
+
+## When Does Validation Run?
+
+You can control when Formik runs validation by changing the values of `<Formik validateOnChange>` and/or `<Formik validateOnBlur>` props depending on your needs. By default, Formik will run validation methods as follows:
+
+**After "change" events/methods** (things that update`values`)
+
+* `handleChange`
+* `setFieldValue`
+* `setValues`
+
+**After "blur" events/methods** (things that update `touched`)
+
+* `handleBlur`
+* `setTouched`
+* `setFieldTouched`
+
+**Whenever submission is attempted**
+
+* `handleSubmit`
+* `submitForm`
+
+There are also imperative helper methods provided to you via Formik's render/injected props which you can use to imperatively call validation.
+
+* `validateForm`
+* `validateField`
+
+## Displaying Error Messages
+
+@todo
+
+## Frequently Asked Questions
+
+<details>
+<summary>How do I determine if my form is validating?</summary>
+
+If `isValidating` prop is `true`
+
+</details>
+
+<details>
+<summary>Can I return `null` as an error message?</summary>
+
+No. Use `undefined` instead. Formik uses `undefined` to represent empty states. If you use `null`, several parts of Formik's computed props (e.g. `isValid` for example), will not work as expected.
+
+</details>
+
+<details>
+<summary>How do I test validation?</summary>
+
+Formik has extensive unit tests for Yup validation so you do not need to test that. However, if you are rolling your own validation functions, you should simply unit test those. If you do need to test Formik's execution you should use the imperative `validateForm` and `validateField` methods respectively.
+
+</details>
diff --git a/website/versioned_docs/version-1.2.0/overview.md b/website/versioned_docs/version-1.2.0/overview.md
new file mode 100644
index 0000000..ddf32ed
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/overview.md
@@ -0,0 +1,231 @@
+---
+id: version-1.2.0-overview
+title: Overview
+original_id: overview
+---
+
+Let's face it, forms are really verbose in
+[React](https://github.com/facebook/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:
+
+1.  Getting values in and out of form state
+2.  Validation and error messages
+3.  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
+
+I ([@jaredpalmer](https://twitter.com/jaredpalmer)) wrote Formik while building a large internal administrative dashboard with
+[@eonwhite](https://twitter.com/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](https://github.com/erikras/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](https://github.com/reactjs/redux/issues/1287#issuecomment-175351978)
+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)
+
+**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.**
+
+## Influences
+
+Formik started by expanding on
+[this little higher order component](https://github.com/jxnblk/rebass-recomposed/blob/master/src/withForm.js)
+by [Brent Jackson](https://github.com/jxnblk), some naming conventions from
+Redux-Form, and (most recently) the render props approach popularized by
+[React-Motion](https://github.com/chenglou/react-motion) and
+[React-Router 4](https://github.com/ReactTraining/react-router). Whether you
+have used any of the above or not, Formik only takes a few minutes to get
+started with.
+
+## Installation
+
+You can install Formik with [NPM](https://npmjs.com),
+[Yarn](https://yarnpkg.com), or a good ol' `<script>` via
+[unpkg.com](https://unpkg.com).
+
+### NPM
+
+```sh
+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](https://codesandbox.io/s/zKrK5YLDZ)**
+
+### CDN
+
+If you're not using a module bundler or package manager we also have a global ("UMD") build hosted on the [unpkg.com](https://unpkg.com) CDN. Simply add the following `<script>` tag to the bottom of your HTML file:
+
+```html
+<script src="https://unpkg.com/formik/dist/formik.umd.production.js"></script>
+```
+
+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](https://reactjs.org/docs/cdn-links.html) 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) https://codesandbox.io/s/zKrK5YLDZ
+* Expo Snack (React Native) https://snack.expo.io/Bk9pPK87X
+
+## The Gist
+
+Formik keeps track of your form's state and then exposes it plus a few reusable
+methods and event handlers (`handleChange`, `handleBlur`, and `handleSubmit`) to
+your form via `props`. `handleChange` and `handleBlur` work exactly as
+expected--they use a `name` or `id` attribute to figure out which field to
+update.
+
+```jsx
+import React from 'react';
+import { Formik } from 'formik';
+
+const Basic = () => (
+  <div>
+    <h1>Anywher in your app!</h1>
+    <Formik
+      initialValues={{ email: '', password: '' }}
+      validate={values => {
+        let errors = {};
+        if (!values.email) {
+          errors.email = 'Required';
+        } else if (
+          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+        ) {
+          errors.email = 'Invalid email address';
+        }
+        return errors;
+      }}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({
+        values,
+        errors,
+        touched,
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        isSubmitting,
+        /* and other goodies */
+      }) => (
+        <form onSubmit={handleSubmit}>
+          <input
+            type="email"
+            name="email"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.email}
+          />
+          {errors.email && touched.email && errors.email}
+          <input
+            type="password"
+            name="password"
+            onChange={handleChange}
+            onBlur={handleBlur}
+            value={values.password}
+          />
+          {errors.password && touched.password && errors.password}
+          <button type="submit" disabled={isSubmitting}>
+            Submit
+          </button>
+        </form>
+      )}
+    </Formik>
+  </div>
+);
+
+export default Basic;
+```
+
+### Reducing boilerplate
+
+The code above is very explicit about exactly what Formik is doing.`onChange` -> `handleChange`, `onBlur` -> `handleBlur`, and so on. However, to save you time, Formik comes with a few extra components to make life easier and less verbose: `<Form />` and `<Field />`. They use React context to hook into the parent `<Formik />` state/methods.
+
+```jsx
+// Render Prop
+import React from 'react';
+import { Formik, Form, Field } from 'formik';
+
+const Basic = () => (
+  <div>
+    <h1>Any place in your app!</h1>
+    <Formik
+      initialValues={{ email: '', password: '' }}
+      validate={values => {
+        let errors = {};
+        if (!values.email) {
+          errors.email = 'Required';
+        } else if (
+          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+        ) {
+          errors.email = 'Invalid email address';
+        }
+        return errors;
+      }}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ errors, touched, isSubmitting }) => (
+        <Form>
+          <Field type="email" name="email" />
+          {errors.email && touched.email && errors.email}
+          <Field type="password" name="password" />
+          {errors.password && touched.password && errors.password}
+          <button type="submit" disabled={isSubmitting}>
+            Submit
+          </button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+
+export default Basic;
+```
+
+### Complementary Packages
+
+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](https://github.com/jquense/yup) for object schema validation. It has an
+API that's pretty similar [Joi](https://github.com/hapijs/joi) /
+[React PropTypes](https://github.com/facebook/prop-types) but is small enough
+for the browser and fast enough for runtime usage. Because I :heart: 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 match [`values`] and [`touched`]. Anyways, you
+can install Yup from npm...
+
+```
+npm install yup --save
+```
diff --git a/website/versioned_docs/version-1.2.0/resources.md b/website/versioned_docs/version-1.2.0/resources.md
new file mode 100644
index 0000000..42154be
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/resources.md
@@ -0,0 +1,40 @@
+---
+id: version-1.2.0-resources
+title: Resources
+original_id: resources
+---
+
+## Conference Talks
+
+* [Taming Forms in React](https://2018.reactjsday.it/talks.html) by
+  [Jared Palmer](https://twitter.com/jaredpalmer) @ React.js Day Italy - Oct 5, 2018
+* [Taming Forms in React](http://reactalicante.es/) by
+  [Jared Palmer](https://twitter.com/jaredpalmer) @ React Alicante - Sep 15, 2018
+* [An Introduction to Formik](https://youtu.be/-tDy7ds0dag?t=33s) by
+  [Jared Palmer](https://twitter.com/jaredpalmer) @ Spotify NYC - Aug 15, 2017
+
+
+## Community Videos
+
+- [Form handling in React-Native with Formik and Yup](https://www.youtube.com/watch?v=EO08ydCCsOQ) by [Emanuel Quimper](https://twitter.com/QuimperEmanuel) - May 23, 2018
+- Building an Airbnb Clone Series by [Ben Awad](https://twitter.com/benawad97)
+  - [Coding React Form with Formik and Ant Design - Part 3](https://www.youtube.com/watch?v=pbCrDBQFU_A&index=5&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
+  - [Form Validation in Formik with Yup - Part 4](https://www.youtube.com/watch?v=2CBnRDJ--aM&index=6&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
+  - [Simplifying a React form with the Formik Field Component - Part 6](https://www.youtube.com/watch?v=eMjju1nQ1F8)
+  - [How to use Formik with React Native - Part 17](https://www.youtube.com/watch?v=sBWtPEinWGA)
+  - [Multi Step Form in React with Formik - Part 36](https://www.youtube.com/watch?v=kKpoAhugjUc)
+  - [Custom Formik Fields and Fix Typescript Imports - Part 37](https://www.youtube.com/watch?v=Xwjg8meOglI)
+  - [Update Listing Form - Part 67](https://www.youtube.com/watch?v=PWgGkWwwHiE&index=69&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
+- [Better React Forms with Formik](https://www.youtube.com/watch?v=yNiJkjEwmpw) by [Andrew Mead](https://twitter.com/andrew_j_mead) - Nov 28, 2017
+- [Simple React Form with Formik](https://youtu.be/MuwQdUoNKzg) by [Ben Awad](https://twitter.com/benawad97) - Nov 3, 2017
+- [Building an Add Channel Form with Formik](https://www.youtube.com/watch?v=anwo_i0wgNo) by [Ben Awad](https://twitter.com/benawad97) - Oct 27, 2017
+
+
+## Community Articles / Tutorials
+
+* [Building dynamic forms with Formik with React and TypeScript](https://scottdj92.ghost.io/building-dynamic-forms-with-formik-with-react-and-typescript/) by [Scott Jones](https://twitter.com/sdj2964) - Sep 1, 2018
+* [Simple React form validation with Formik, Yup and/or Spected](https://itnext.io/simple-react-form-validation-with-formik-yup-and-or-spected-206ebe9e7dcc) by [Jakub Kočí](https://github.com/jakubkoci) - May 21, 2018
+* [ Formik —Handling files and reCaptcha](https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc) by [João Miguel Cunha](https://twitter.com/lokuzt) - Dec 18, 2017
+* [Better React Forms with Formik](https://mead.io/formik/?utm_source=github&utm_campaign=formikrepo) by [Andrew Mead](https://twitter.com/andrew_j_mead) - Nov 28, 2017
+* [The Joy of Forms with React and Formik](https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/) by [Mat Warger](https://twitter.com/mwarger) - Oct 23, 2017
+* [Painless React Forms with Formik](https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60) by [João Miguel Cunha](https://twitter.com/lokuzt) - Sep 8, 2017
diff --git a/website/versioned_docs/version-1.2.0/tutorial.md b/website/versioned_docs/version-1.2.0/tutorial.md
new file mode 100644
index 0000000..375da61
--- /dev/null
+++ b/website/versioned_docs/version-1.2.0/tutorial.md
@@ -0,0 +1,150 @@
+---
+id: version-1.2.0-tutorial
+title: Tutorial
+original_id: tutorial
+---
+
+Imagine you want to build a form that lets you edit user data. However, your
+user API has nested objects like so.
+
+```js
+{
+   id: string,
+   email: string,
+   social: {
+     facebook: string,
+     twitter: string,
+     // ...
+   }
+}
+```
+
+When we are done we want our dialog to accept just a `user`, `updateUser`, and
+`onClose` props.
+
+```jsx
+// User.js
+import React from 'react';
+import Dialog from 'MySuperDialog';
+import { Formik } from 'formik';
+
+const EditUserDialog = ({ user, updateUser, onClose }) => {
+  return (
+    <Dialog onClose={onClose}>
+      <h1>Edit User</h1>
+      <Formik
+        initialValues={user /** { email, social } */}
+        onSubmit={(values, actions) => {
+          CallMyApi(user.id, values).then(
+            updatedUser => {
+              actions.setSubmitting(false);
+              updateUser(updatedUser), onClose();
+            },
+            error => {
+              actions.setSubmitting(false);
+              actions.setErrors(transformMyAPIErrorToAnObject(error));
+            }
+          );
+        }}
+        render={({
+          values,
+          errors,
+          touched,
+          handleBlur,
+          handleChange,
+          handleSubmit,
+          isSubmitting,
+        }) => (
+          <form onSubmit={handleSubmit}>
+            <input
+              type="email"
+              name="email"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.email}
+            />
+            {errors.email && touched.email && <div>{errors.email}</div>}
+            <input
+              type="text"
+              name="social.facebook"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.social.facebook}
+            />
+            {errors.social &&
+              errors.social.facebook &&
+              touched.facebook && <div>{errors.social.facebook}</div>}
+            <input
+              type="text"
+              name="social.twitter"
+              onChange={handleChange}
+              onBlur={handleBlur}
+              value={values.social.twitter}
+            />
+            {errors.social &&
+              errors.social.twitter &&
+              touched.twitter && <div>{errors.social.twitter}</div>}
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </form>
+        )}
+      />
+    </Dialog>
+  );
+};
+```
+
+To make writing forms less verbose. Formik comes with a few helpers to save you
+key strokes.
+
+* `<Field>`
+* `<Form />`
+
+This is the **exact** same form as before, but written with `<Form />` and
+`<Field />`:
+
+```jsx
+// EditUserDialog.js
+import React from 'react';
+import Dialog from 'MySuperDialog';
+import { Formik, Field, Form } from 'formik';
+
+const EditUserDialog = ({ user, updateUser, onClose }) => {
+  return (
+    <Dialog onClose={onClose}>
+      <h1>Edit User</h1>
+      <Formik
+        initialValues={user /** { email, social } */}
+        onSubmit={(values, actions) => {
+          CallMyApi(user.id, values).then(
+            updatedUser => {
+              actions.setSubmitting(false);
+              updateUser(updatedUser), onClose();
+            },
+            error => {
+              actions.setSubmitting(false);
+              actions.setErrors(transformMyAPIErrorToAnObject(error));
+            }
+          );
+        }}
+        render={({ errors, touched, isSubmitting }) => (
+          <Form>
+            <Field type="email" name="email" />
+            {errors.email && touched.email && <div>{errors.email}</div>}
+            <Field type="text" name="social.facebook" />
+            {errors.social.facebook &&
+              touched.social.facebook && <div>{errors.social.facebook}</div>}
+            <Field type="text" name="social.twitter" />
+            {errors.social.twitter &&
+              touched.social.twitter && <div>{errors.social.twitter}</div>}
+            <button type="submit" disabled={isSubmitting}>
+              Submit
+            </button>
+          </Form>
+        )}
+      />
+    </Dialog>
+  );
+};
+```
diff --git a/website/versioned_sidebars/version-1.2.0-sidebars.json b/website/versioned_sidebars/version-1.2.0-sidebars.json
new file mode 100644
index 0000000..7928209
--- /dev/null
+++ b/website/versioned_sidebars/version-1.2.0-sidebars.json
@@ -0,0 +1,25 @@
+{
+  "version-1.2.0-docs": {
+    "Getting Started": [
+      "version-1.2.0-overview",
+      "version-1.2.0-tutorial",
+      "version-1.2.0-resources"
+    ],
+    "Guides": [
+      "version-1.2.0-guides/validation",
+      "version-1.2.0-guides/arrays",
+      "version-1.2.0-guides/typescript",
+      "version-1.2.0-guides/react-native",
+      "version-1.2.0-guides/form-submission"
+    ],
+    "API Reference": [
+      "version-1.2.0-api/formik",
+      "version-1.2.0-api/withFormik",
+      "version-1.2.0-api/field",
+      "version-1.2.0-api/fieldarray",
+      "version-1.2.0-api/form",
+      "version-1.2.0-api/connect",
+      "version-1.2.0-api/fastfield"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/website/versions.json b/website/versions.json
new file mode 100644
index 0000000..6a2a2a1
--- /dev/null
+++ b/website/versions.json
@@ -0,0 +1,3 @@
+[
+  "1.2.0"
+]


Test patch:
diff --git a/test/ErrorMessage.test.tsx b/test/ErrorMessage.test.tsx
new file mode 100644
index 0000000..f9739fb
--- /dev/null
+++ b/test/ErrorMessage.test.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Formik, FormikProps, ErrorMessage } from '../src';
+import { noop } from './testHelpers';
+
+interface TestFormValues {
+  name: string;
+  email: string;
+}
+
+const TestForm: React.SFC<any> = p => (
+  <Formik
+    onSubmit={noop}
+    initialValues={{ name: 'jared', email: 'hello@reason.nyc' }}
+    {...p}
+  />
+);
+
+describe('<ErrorMessage />', () => {
+  const node = document.createElement('div');
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(node);
+  });
+  it('renders with children as a function', async () => {
+    let actual: any; /** ErrorMessage ;) */
+    let actualFProps: any;
+    let message = 'Wrong';
+    ReactDOM.render(
+      <TestForm
+        render={(fProps: FormikProps<TestFormValues>) => {
+          actualFProps = fProps;
+          return (
+            <div>
+              <ErrorMessage name="email">
+                {props => (actual = props) || <div>{props}</div>}
+              </ErrorMessage>
+            </div>
+          );
+        }}
+      />,
+      node
+    );
+
+    actualFProps.setFieldError('email', message);
+    // Only renders if Field has been visited.
+    expect(actual).toEqual(undefined);
+    actualFProps.setFieldTouched('email');
+    // Renders after being visited with an error.
+    expect(actual).toEqual(message);
+  });
+});