[v2] Hooks

.size-snapshot.json

@@ -1,36 +1,41 @@
 {
   "./dist/formik.umd.production.js": {
-    "bundled": 141389,
-    "minified": 38919,
-    "gzipped": 11819
-  },
-  "./dist/formik.umd.development.js": {
-    "bundled": 172577,
-    "minified": 49765,
-    "gzipped": 14998
+    "bundled": 123663,
+    "minified": 31550,
+    "gzipped": 10196
   },
   "./dist/formik.cjs.production.js": {
-    "bundled": 42006,
-    "minified": 21340,
-    "gzipped": 5354
+    "bundled": 35255,
+    "minified": 16877,
+    "gzipped": 5039
   },
   "./dist/formik.cjs.development.js": {
-    "bundled": 42894,
-    "minified": 22223,
-    "gzipped": 5697
+    "bundled": 35842,
+    "minified": 17526,
+    "gzipped": 5278
+  },
+  "dist/index.js": {
+    "bundled": 33614,
+    "minified": 17803,
+    "gzipped": 5329
   },
   "dist/formik.esm.js": {
-    "bundled": 38805,
-    "minified": 21612,
-    "gzipped": 5575,
+    "bundled": 32128,
+    "minified": 16540,
+    "gzipped": 5150,
     "treeshaked": {
       "rollup": {
-        "code": 766,
-        "import_statements": 344
+        "code": 347,
+        "import_statements": 313
       },
       "webpack": {
-        "code": 3439
+        "code": 2692
       }
     }
+  },
+  "./dist/formik.umd.development.js": {
+    "bundled": 125491,
+    "minified": 32979,
+    "gzipped": 10840
   }
 }

docs/api/useField.md

@@ -0,0 +1,79 @@
+---
+id: usefield
+title: useField()
+custom_edit_url: https://github.com/jaredpalmer/formik/edit/master/docs/api/usefield.md
+---
+
+`useField` is a custom React hook that will automagically help you hook up inputs to Formik. You can and should use it build your own custom input primitives.
+
+## Example
+
+```jsx
+import React from 'react';
+import { useField, Formik } from 'formik';
+
+const MyTextField = ({ label, ...props }) => {
+  const [field, meta] = useField(props.name);
+  return (
+    <>
+      <label>
+        {label}
+        <input {...field} {...props} />
+      </label>
+      {meta.touch && meta.error ? (
+        <div className="error">{meta.error}</div>
+      ) : null}
+    </>
+  );
+};
+
+const Example = () => (
+  <div>
+    <h1>My Form</h1>
+    <Formik
+      initialValues={{ email: '', firstName: 'red', lastName: '' }}
+      onSubmit={(values, actions) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          actions.setSubmitting(false);
+        }, 1000);
+      }}
+      render={(props: FormikProps<Values>) => (
+        <form onSubmit={props.handleSubmit}>
+          <MyTextField name="firstName" type="text" label="First Name" />
+          <MyTextField name="lastName" type="text" label="Last Name" />
+          <MyTextField name="email" type="email" label="Email" />
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    />
+  </div>
+);
+```
+
+---
+
+# Reference
+
+## `useField(name: string): [FieldProps, FieldMetaProps]`
+
+A custom React Hook that returns a tuple (2 element array) containing `FieldProps` and `FieldMetaProps`.
+
+### `FieldProps`
+
+An object that contains:
+
+* `onChange`
+* `onBlur`
+* `value`
+* `name`
+
+for a given field in Formik state. This is to avoid needing to manually wire up inputs.
+
+### `FieldMeta`
+
+An object that contains relevant computed metadata about a field. More specifically,
+
+* `touch: boolean` - Whether the field has been visited (plucked out of `touched`)
+* `error?: string` - The field's error message (plucked out of `errors`)
+* `initialValue: any` - The field's initial value if the field is given a value in `initialValues` (plucked out of `initialValues`)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "1.4.0",
+  "version": "2.0.0-canary.effcf9b",
   "license": "MIT",
   "author": "Jared Palmer <jared@palmer.net>",
   "repository": "jaredpalmer/formik",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">=15"
+    "react": "^16.7.0-alpha.0"
   },
   "scripts": {
     "test": "jest --env=jsdom",
@@ -53,17 +53,17 @@
   },
   "optionalDependencies": {},
   "resolutions": {
-    "@types/react": "^16.7.6",
-    "@types/react-dom": "^16.0.9"
+    "@types/react": "16.7.17",
+    "@types/react-dom": "16.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@storybook/addon-options": "^3.4.8",
     "@storybook/react": "^3.4.0",
     "@types/jest": "^22.2.3",
     "@types/lodash": "^4.14.119",
-    "@types/react": "^16.7.6",
-    "@types/react-dom": "^16.0.9",
+    "@types/react": "^16.7.17",
+    "@types/react-dom": "^16.0.11",
     "@types/warning": "^3.0.0",
     "@types/yup": "^0.24.9",
     "all-contributors-cli": "^4.4.0",
@@ -79,8 +79,8 @@
     "lint-staged": "4.0.2",
     "prettier": "1.11.1",
     "raw-loader": "^0.5.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.7.0-alpha.2",
+    "react-dom": "^16.7.0-alpha.2",
     "react-testing-library": "^5.2.3",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.4",
@@ -96,7 +96,7 @@
     "tsc-watch": "^1.0.21",
     "tslint": "^5.11.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.1.6",
+    "typescript": "^3.2.1",
     "yup": "0.21.3"
   },
   "lint-staged": {

src/ErrorMessage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormikContext } from './types';
+import { FormikCtx } from './types';
 import { getIn, isFunction } from './utils';
 import { connect } from './connect';
 
@@ -12,11 +12,9 @@ export interface ErrorMessageProps {
 }
 
 class ErrorMessageImpl extends React.Component<
-  ErrorMessageProps & { formik: FormikContext<any> }
+  ErrorMessageProps & { formik: FormikCtx<any> }
 > {
-  shouldComponentUpdate(
-    props: ErrorMessageProps & { formik: FormikContext<any> }
-  ) {
+  shouldComponentUpdate(props: ErrorMessageProps & { formik: FormikCtx<any> }) {
     if (
       getIn(this.props.formik.errors, this.props.name) !==
         getIn(props.formik.errors, this.props.name) ||
@@ -50,5 +48,5 @@ class ErrorMessageImpl extends React.Component<
 
 export const ErrorMessage = connect<
   ErrorMessageProps,
-  ErrorMessageProps & { formik: FormikContext<any> }
+  ErrorMessageProps & { formik: FormikCtx<any> }
 >(ErrorMessageImpl);