{"_id":"@arathunku/formik","_rev":"4-0dfc6df8388ddc6005236fdb8d2e6c20","name":"@arathunku/formik","dist-tags":{"latest":"1.0.0-beta.5"},"versions":{"1.0.0-beta.2":{"name":"@arathunku/formik","version":"1.0.0-beta.2","keywords":["formik","react","react-dom","form","validation","forms","higher order component","hoc"],"author":{"name":"Jared Palmer","email":"jared@palmer.net"},"license":"MIT","_id":"@arathunku/formik@1.0.0-beta.2","maintainers":[{"name":"arathunku","email":"m@4is.io"}],"homepage":"https://github.com/arathunku/formik#readme","bugs":{"url":"https://github.com/arathunku/formik/issues"},"dist":{"shasum":"f0bb658b91255c10b23d99ed3e401e5e8c46723c","tarball":"https://registry.npmjs.org/@arathunku/formik/-/formik-1.0.0-beta.2.tgz","fileCount":25,"integrity":"sha512-AKmCVhwKZkSW+hnbLZMLnXv8FOY6PZmj2SPNPNefe14EE/Bl8JOc4dBkyHsu7XJjsS2E5ZoRcRmrGYn+b/CVTg==","signatures":[{"sig":"MEUCIAfkW+nndZgs2hZj/KWFNtAA+cW2gOb/vmc+snFfY3Q5AiEAqHpoikrBPfd9V/qSvk2d3SOu+lNFH8OZWRdzL1C3Vr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1372944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKq11CRA9TVsSAnZWagAADCcP/2ajf6s9bV1vqAYu69uQ\nC1RSUz6gK+TG9M2TzeAvYDW/166DHbw6E6++3+e04R7eBw3O2fLUUgQS3AjN\nOqfeFMmVd/SM5zPkvXOSRGWw147CEHoBb6xef0zhDaPBX6/x7OC3J4oYnReE\n330VmKea4sbLLbc3YUFdMWGsRCL4u15mF/lEU0HQ6Rh/9Ww+MuWKGcAmDgGa\neXBPTiZrWOC1ZWv5xIGFBUbxe6AOMZFimAgG3P+oPOGJtwFSCqnEawj2AZRi\n6IoueYYp+60SD6kkVi3kzO6Wz+N2V3CqvwV1WN7BFHQ1uqNaPulDH/P/kj+X\nEpxxk0XDqH4/9qEDHEvd6hI/MxV5VA1iYJNsN/TYFzrE1XI2UOrer9cvS1l/\n8FZbKix+MR1M9GEPIgUe/duJt21YvffNgM+0wzt3oUPk/8KSKQvDYOopsgs7\nKenpQC9uRp6pZaQ/Kw9y1Hbu9FkPbvLuNGDu8XEeY9CIWD5WJ6bm6gpERUQJ\nt4uk121HxOGMnchu69jet9RDIRlfWCEeUZQh1PtgU85DhBs+4sSKScAApkum\nFe9aEfSr8MkL/LU+wlaIQ5BoAFeH7f/SgpEAIr6m7A/aSXDiTj/eoqHWzqKO\nrmGLch3KD1SJo2kKanHecGeodyL9SWME7N0P6qtSTPyvEau6LFUzJn3gwoGv\nre8R\r\n=Jptj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testMatch":["/test/**/?(*.)(spec|test).ts?(x)"],"transform":{".(ts|tsx)":"/node_modules/ts-jest/preprocessor.js"},"setupFiles":["raf/polyfill","/test/setupTest.ts"],"collectCoverageFrom":["src/**/*.{ts,tsx}"],"moduleFileExtensions":["ts","tsx","js","json"],"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"]},"main":"dist/index.js","files":["dist"],"module":"dist/formik.es6.js","gitHead":"6f95e24568a53339d09024dce70606ed7dc66591","scripts":{"addc":"all-contributors add","size":"size-limit","test":"jest --env=jsdom","build":"cross-env NODE_ENV=production tsc -p tsconfig.base.json && rollup -c && rimraf compiled && cp ./index.js ./dist/index.js","start":"cp ./index.js ./dist/index.js && cross-env NODE_ENV=development rollup -w -c | tsc -w -p tsconfig.base.json","format":"prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'test/**/*' 'README.md'","gen-docs":"all-contributors generate && doctoc README.md","prebuild":"rimraf dist","precommit":"lint-staged","prepublish":"npm run build","test:watch":"npm run test -- --watch","build-website":"cd website && yarn install && yarn build","start-website":"cd website && yarn start"},"typings":"dist/index.d.ts","_npmUser":{"name":"arathunku","email":"m@4is.io"},"prettier":{"semi":true,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/arathunku/formik.git","type":"git"},"size-limit":[{"path":"./dist/index.js","limit":"14 kB"},{"path":"./dist/formik.es6.js","limit":"14 kB"},{"path":"./dist/formik.umd.production.js","limit":"14 kB"}],"_npmVersion":"5.6.0","description":"Forms in React, without tears","directories":{},"lint-staged":{"**/*.{ts,tsx}":["prettier --trailing-comma es5 --single-quote --write","git add"]},"_nodeVersion":"8.9.0","dependencies":{"warning":"^3.0.0","prop-types":"^15.6.1","lodash.topath":"4.5.2","lodash.clonedeep":"^4.5.0","react-fast-compare":"^1.0.0","create-react-context":"^0.2.2","hoist-non-react-statics":"^2.5.0","react-lifecycles-compat":"^3.0.4"},"_hasShrinkwrap":false,"devDependencies":{"yup":"0.21.3","jest":"^23.1.0","husky":"0.14.3","react":"^16.3.2","doctoc":"^1.3.0","rimraf":"^2.6.2","rollup":"^0.59.0","tslint":"5.5.0","ts-jest":"^22.4.6","jest-cli":"^23.1.0","prettier":"1.11.1","cross-env":"5.0.5","react-dom":"^16.3.2","tsc-watch":"^1.0.21","size-limit":"^0.17.0","typescript":"2.8.3","@types/jest":"^22.2.3","lint-staged":"4.0.2","@types/react":"16.0.28","tslint-react":"3.2.0","@pisano/enzyme":"^3.3.0-pisano.public.1","@types/warning":"^3.0.0","@types/react-dom":"^16.0.3","@types/lodash.topath":"4.5.3","all-contributors-cli":"^4.4.0","rollup-plugin-uglify":"^3.0.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-filesize":"1.4.2","@types/lodash.clonedeep":"^4.5.3","rollup-plugin-sourcemaps":"^0.4.2","@types/react-test-renderer":"15.5.2","rollup-plugin-node-resolve":"^3.3.0","@pisano/enzyme-adapter-react-16":"^1.1.1-pisano.public.1"},"peerDependencies":{"react":">=15"},"optionalDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/formik_1.0.0-beta.2_1529523570858_0.7540369335377199","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0-beta.5":{"name":"@arathunku/formik","version":"1.0.0-beta.5","keywords":["formik","react","react-dom","form","validation","forms","higher order component","hoc"],"author":{"name":"Jared Palmer","email":"jared@palmer.net"},"license":"MIT","_id":"@arathunku/formik@1.0.0-beta.5","maintainers":[{"name":"arathunku","email":"m@4is.io"}],"homepage":"https://github.com/arathunku/formik#readme","bugs":{"url":"https://github.com/arathunku/formik/issues"},"dist":{"shasum":"f62a48ec57cea84a239e861fae88c2f6a5dd47d7","tarball":"https://registry.npmjs.org/@arathunku/formik/-/formik-1.0.0-beta.5.tgz","fileCount":25,"integrity":"sha512-o/t0nYgnDN1umIDk8yKsiZ0LxrEc5LauNutEYrJ75d/mFIXIWUEh2MUEsWrHfJJCS87t2Tk9MZnk3cKoz65p2A==","signatures":[{"sig":"MEYCIQD9RZas/0l4m7nCqoEpMNebZxyO/jsySKfsiERAZ5aqPQIhAM0z3HwZNoPs0MkLxPOotze/vxbiYFZwPFXuzecTWRs2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1411820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbREFCCRA9TVsSAnZWagAAY2IP/2yjzkCdZH4OtQ4Hlokr\npldp8IRFl1sJCA04FeKhd8onI1fk1iJ8Q20MnHfw2vWkHp5naphq8DM9V4l6\njBNh8FIxrSO04VQo8YT22D825W7TJHQ3IY9/uLff09d8oD4uhqSBBWDm9VWo\nFZduBe72cr6EGe6a3RZh/o8zptOT6SuRCKQRcsmbno/pfX4O5YcQ+Gp5kTeC\nHtVADNmlfiYCHLsqBZTRUyXDkhP6arsXWsblLaNgrfzgXv8qgARl2CMRejzn\n2z1l5JhdXEfP/EZ8pIKWB8fvgY1TaXTuJw+F0xNwhD6ERnnSJvFyyjeP3FSL\nZlOaZH0lNG/TJkQCm5Tk2qowK2osNFZtFIjVWsjesocGDfP8EC0VopKqjHsg\nfNaFSPDpjHcVfKSl6Ttciz7vAP4l8c8o9g/wQ2PtEgxCt9tBvxoUbguVmhJm\nCAiQzkG9SoPewTdbcRVSvbnV7We+8n7A585tNtMIX2KRcx8QGBnwBv+/mKZ8\nWQSIxxBBg9nYgvnaA6nPwfCtW3gR9Ll474yMppiNG0xcw5wV/rL9HxI7lrPO\nYk4G1T9YSnAeoLrKdRBIl4Bkz3V3wAJBfhNpE5a8db7oWkHz1iSyqT4GmgcT\nQX+2L4UrblwbcHqPneLGiDGb9djJd87eTup2ScoSigrjj0lqzKlNps69MXiQ\nMzvc\r\n=uC9M\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testMatch":["/test/**/?(*.)(spec|test).ts?(x)"],"transform":{".(ts|tsx)":"/node_modules/ts-jest/preprocessor.js"},"setupFiles":["raf/polyfill","/test/setupTest.ts"],"collectCoverageFrom":["src/**/*.{ts,tsx}"],"moduleFileExtensions":["ts","tsx","js","json"],"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"]},"main":"dist/index.js","files":["dist"],"module":"dist/formik.esm.js","gitHead":"332c009ebd20478ff22033f52714ac0207cf2b27","scripts":{"addc":"all-contributors add","size":"size-limit","test":"jest --env=jsdom","build":"cross-env NODE_ENV=production tsc -p tsconfig.base.json && rollup -c && rimraf compiled && cp ./index.js ./dist/index.js","start":"cp ./index.js ./dist/index.js && cross-env NODE_ENV=development rollup -w -c | tsc -w -p tsconfig.base.json","format":"prettier --trailing-comma es5 --single-quote --write 'src/**/*' 'test/**/*' 'README.md'","gen-docs":"all-contributors generate && doctoc README.md","prebuild":"rimraf dist","precommit":"lint-staged","storybook":"start-storybook -p 9001","prepublish":"npm run build","test:watch":"npm run test -- --watch","build-website":"cd website && yarn install && yarn build","start-website":"cd website && yarn start"},"typings":"dist/index.d.ts","_npmUser":{"name":"arathunku","email":"m@4is.io"},"prettier":{"semi":true,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/arathunku/formik.git","type":"git"},"size-limit":[{"path":"./dist/index.js","limit":"14 kB"},{"path":"./dist/formik.esm.js","limit":"14 kB"},{"path":"./dist/formik.umd.production.js","limit":"14 kB"}],"_npmVersion":"5.6.0","description":"Forms in React, without tears","directories":{},"lint-staged":{"**/*.{ts,tsx}":["prettier --trailing-comma es5 --single-quote --write","git add"]},"_nodeVersion":"8.9.0","dependencies":{"warning":"^3.0.0","deepmerge":"^2.1.1","prop-types":"^15.6.1","lodash.topath":"4.5.2","lodash.clonedeep":"^4.5.0","react-fast-compare":"^1.0.0","create-react-context":"^0.2.2","hoist-non-react-statics":"^2.5.0"},"_hasShrinkwrap":false,"devDependencies":{"yup":"0.21.3","jest":"^23.1.0","husky":"0.14.3","react":"^16.3.2","doctoc":"^1.3.0","rimraf":"^2.6.2","rollup":"^0.59.0","tslint":"5.5.0","ts-jest":"^22.4.6","jest-cli":"^23.1.0","prettier":"1.11.1","cross-env":"5.0.5","react-dom":"^16.3.2","tsc-watch":"^1.0.21","raw-loader":"^0.5.1","size-limit":"^0.17.0","typescript":"2.9.1","@types/jest":"^22.2.3","lint-staged":"4.0.2","@types/react":"16.0.28","tslint-react":"3.2.0","@pisano/enzyme":"^3.3.0-pisano.public.1","@types/warning":"^3.0.0","@storybook/react":"^3.4.0","@types/react-dom":"^16.0.3","@types/lodash.topath":"4.5.3","all-contributors-cli":"^4.4.0","rollup-plugin-uglify":"^3.0.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-filesize":"1.4.2","@types/lodash.clonedeep":"^4.5.3","@storybook/addon-options":"^3.4.8","rollup-plugin-sourcemaps":"^0.4.2","awesome-typescript-loader":"^3.4.1","@types/react-test-renderer":"15.5.2","rollup-plugin-node-resolve":"^3.3.0","@pisano/enzyme-adapter-react-16":"^1.1.1-pisano.public.1"},"peerDependencies":{"react":">=15"},"optionalDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/formik_1.0.0-beta.5_1531199810158_0.7940167186392681","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2018-06-20T19:39:30.605Z","modified":"2025-10-14T08:59:52.863Z","1.0.0-beta.2":"2018-06-20T19:39:30.955Z","1.0.0-beta.5":"2018-07-10T05:16:50.290Z"},"bugs":{"url":"https://github.com/arathunku/formik/issues"},"author":{"name":"Jared Palmer","email":"jared@palmer.net"},"license":"MIT","homepage":"https://github.com/arathunku/formik#readme","keywords":["formik","react","react-dom","form","validation","forms","higher order component","hoc"],"repository":{"url":"git+https://github.com/arathunku/formik.git","type":"git"},"description":"Forms in React, without tears","maintainers":[{"name":"arathunku","email":"m@4is.io"}],"readme":"![](https://user-images.githubusercontent.com/4060187/27243721-3b5219d0-52b1-11e7-96f1-dae8391a3ef6.png)\n\n[![gzip size](http://img.badgesize.io/https://unpkg.com/formik/dist/formik.umd.min.js?compression=gzip)](https://unpkg.com/formik/dist/formik.umd.min.js)\n[![Build Status](https://travis-ci.org/jaredpalmer/formik.svg?branch=master)](https://travis-ci.org/jaredpalmer/formik)\n[![npm](https://img.shields.io/npm/v/formik.svg)](https://npm.im/formik)\n[![license](https://img.shields.io/npm/l/formik.svg)](./LICENSE)\n[![Discord](https://img.shields.io/discord/102860784329052160.svg?style=flat-square)](https://discord.gg/cU6MCve)\n\n## Overview\n\nLet's face it, forms are really verbose in\n[React](https://github.com/facebook/react). To make matters worse, most form\nhelpers do wayyyy too much magic and often have a significant performance cost\nassociated with them. Formik is a small library that helps you with the 3 most\nannoying parts:\n\n1. Getting values in and out of form state\n2. Validation and error messages\n3. Handling form submission\n\nBy colocating all of the above in one place, Formik will keep things\norganized--making testing, refactoring, and reasoning about your forms a breeze.\n\n## Developer Experience\n\nI ([@jaredpalmer](https://twitter.com/jaredpalmer)) wrote Formik while building a large internal administrative dashboard with\n[@eonwhite](https://twitter.com/eonwhite). With around ~30 unique forms, it\nquickly became obvious that we could benefit by standardizing not just our input\ncomponents but also the way in which data flowed through our forms.\n\n### Why not Redux-Form?\n\nBy now, you might be thinking, \"Why didn't you just use\n[Redux-Form](https://github.com/erikras/redux-form)?\" Good question.\n\n1. According to our prophet Dan Abramov,\n [**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)\n2. Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY\n SINGLE KEYSTROKE. This is fine for small apps, but as your Redux app grows,\n input latency will continue to increase if you use Redux-Form.\n3. Redux-Form is 22.5 kB minified gzipped (Formik is 7.8 kB)\n\n**My goal with Formik was to create a scalable, performant, form helper with a\nminimal API that does the really really annoying stuff, and leaves the rest up\nto you.**\n\n## Testimonials\n\n> \"I can't believe people ever put forms in redux, or did anything else other than this.\" \n> --[James Long](https://twitter.com/jlongster), Creator of Prettier and Actual Budget\n\n> [\"Formik. All day. All long.\"](https://twitter.com/ken_wheeler/status/974676242501947397?s=20) \n> --[Ken Wheeler](https://twitter.com/ken_wheeler), Director of Open Source at Formidable Labs\n\n> [\"Been using @jaredpalmer's Formik lately at work – this is my all-time favorite way to handle forms\"](https://twitter.com/jxnblk/status/1000036895366307846) \n> --[Brent Jackson](https://twitter.com/jxnblk/), Creator of Rebass, styled-system, Compositor and many more\n\n> [\"Formik removes most of the moving parts involved in forms allowing me to move faster with more confidence.\"](https://twitter.com/tkh44/status/1000058583197732864) \n> --[Kye Hohenberger](https://twitter.com/tkh44), Creator of Emotion\n\n## Influences\n\nFormik started by expanding on\n[this little higher order component](https://github.com/jxnblk/rebass-recomposed/blob/master/src/withForm.js)\nby [Brent Jackson](https://github.com/jxnblk), some naming conventions from\nRedux-Form, and (most recently) the render props approach popularized by\n[React-Motion](https://github.com/chenglou/react-motion) and\n[React-Router 4](https://github.com/ReactTraining/react-router). Whether you\nhave used any of the above or not, Formik only takes a few minutes to get\nstarted with.\n\n## Installation\n\nAdd Formik to your project.\n\n```bash\nnpm i formik --save\n```\n\nYou can also try before you buy with this\n**[demo of Formik on CodeSandbox.io](https://codesandbox.io/s/zKrK5YLDZ)**\n\n## Demos\n\n* [Basics](https://codesandbox.io/s/zKrK5YLDZ)\n* [Sync Validation](https://codesandbox.io/s/q8yRqQMp)\n* [Building your own input primitives](https://codesandbox.io/s/qJR4ykJk)\n* [Working with 3rd-party inputs #1: react-select](https://codesandbox.io/s/jRzE53pqR)\n* [Working with 3rd-party inputs #2: Draft.js](https://codesandbox.io/s/QW1rqjBLl)\n* [Accessing React lifecycle functions](https://codesandbox.io/s/pgD4DLypy)\n\n## Talks\n\n* [An Introduction to Formik](https://youtu.be/-tDy7ds0dag?t=33s) by\n [Jared Palmer](https://twitter.com/jaredpalmer) @ Spotify NYC. August 15th, 2017.\n\n\n\n## Community Articles / Tutorials\n\n* [Better React Forms with Formik](https://mead.io/formik/?utm_source=github&utm_campaign=formikrepo)\n* [The Joy of Forms with React and Formik](https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/)\n* [Painless React Forms with Formik](https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60)\n\n## The gist\n\nFormik keeps track of your form's state and then exposes it plus a few reusable\nmethods and event handlers (`handleChange`, `handleBlur`, and `handleSubmit`) to\nyour form via `props`. `handleChange` and `handleBlur` work exactly as\nexpected--they use a `name` or `id` attribute to figure out which field to\nupdate.\n\nThere are two ways to use Formik:\n\n* `withFormik()`: A Higher-order Component (HoC) that accepts a configuration\n object\n* ``: A React component with a `render` prop\n\n**Both do exactly the same thing** and share the same internal implementation.\nThey just differ in their respective style....\n\n```js\n// Higher Order Component\nimport React from 'react';\nimport { withFormik } from 'formik';\n\n// Our inner form component which receives our form's state and updater methods as props\nconst InnerForm = ({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n isSubmitting,\n}) => (\n
\n \n {touched.email && errors.email &&
{errors.email}
}\n \n {touched.password && errors.password &&
{errors.password}
}\n \n \n);\n\n// Wrap our form with the using withFormik HoC\nconst MyForm = withFormik({\n // Transform outer props into form values\n mapPropsToValues: props => ({ email: '', password: '' }),\n // Add a custom validation function (this can be async too!)\n validate: (values, props) => {\n const errors = {};\n if (!values.email) {\n errors.email = 'Required';\n } else if (\n !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)\n ) {\n errors.email = 'Invalid email address';\n }\n return errors;\n },\n // Submission handler\n handleSubmit: (\n values,\n {\n props,\n setSubmitting,\n setErrors /* setValues, setStatus, and other goodies */,\n }\n ) => {\n LoginToMyApp(values).then(\n user => {\n setSubmitting(false);\n // do whatevs...\n // props.updateUser(user)\n },\n errors => {\n setSubmitting(false);\n // Maybe even transform your API's errors into the same shape as Formik's!\n setErrors(transformMyApiErrors(errors));\n }\n );\n },\n})(InnerForm);\n\n// Use anywhere\nconst Basic = () => (\n
\n

My Form

\n

This can be anywhere in your application

\n \n
\n);\n\nexport default Basic;\n```\n\n```js\n// Render Prop\nimport React from 'react';\nimport { Formik } from 'formik';\n\nconst Basic = () => (\n
\n

My Form

\n

This can be anywhere in your application

\n {/*\n The benefit of the render prop approach is that you have full access to React's\n state, props, and composition model. Thus there is no need to map outer props\n to values...you can just set the initial values, and if they depend on props / state\n then--boom--you can directly access to props / state.\n\n The render prop accepts your inner form component, which you can define separately or inline\n totally up to you:\n - `
...
}>`\n - ``\n - `{props =>
...
}` (identical to as render, just written differently)\n */}\n {\n // same as above, but feel free to move this into a class method now.\n let errors = {};\n if (!values.email) {\n errors.email = 'Required';\n } else if (\n !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)\n ) {\n errors.email = 'Invalid email address';\n }\n return errors;\n }}\n onSubmit={(\n values,\n { setSubmitting, setErrors /* setValues and other goodies */ }\n ) => {\n LoginToMyApp(values).then(\n user => {\n setSubmitting(false);\n // do whatevs...\n // props.updateUser(user)\n },\n errors => {\n setSubmitting(false);\n // Maybe transform your API's errors into the same shape as Formik's\n setErrors(transformMyApiErrors(errors));\n }\n );\n }}\n render={({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n isSubmitting,\n }) => (\n
\n \n {touched.email && errors.email &&
{errors.email}
}\n \n {touched.password && errors.password &&
{errors.password}
}\n \n \n )}\n />\n
\n);\n\nexport default Basic;\n```\n\n### Complementary Packages\n\nAs you can see above, validation is left up to you. Feel free to write your own\nvalidators or use a 3rd party library. Personally, I use\n[Yup](https://github.com/jquense/yup) for object schema validation. It has an\nAPI that's pretty similar [Joi](https://github.com/hapijs/joi) /\n[React PropTypes](https://github.com/facebook/prop-types) but is small enough\nfor the browser and fast enough for runtime usage. Because I :heart: Yup sooo\nmuch, Formik has a special config option / prop for Yup called\n[`validationSchema`] which will automatically transform Yup's validation errors\ninto a pretty object whose keys match [`values`] and [`touched`]. Anyways, you\ncan install Yup from npm...\n\n```\nnpm install yup --save\n```\n\n## Table of Contents\n\n\n\n\n\n- [Guides](#guides)\n - [Basics](#basics)\n - [React Native](#react-native)\n - [Why use `setFieldValue` instead of `handleChange`?](#why-use-setfieldvalue-instead-of-handlechange)\n - [Avoiding new functions in render](#avoiding-new-functions-in-render)\n - [Using Formik with TypeScript](#using-formik-with-typescript)\n - [Render props (`` and ``)](#render-props-formik--and-field)\n - [`withFormik()`](#withformik)\n- [API](#api)\n - [``](#formik-)\n - [Formik render methods](#formik-render-methods)\n - [Formik props](#formik-props)\n - [`dirty: boolean`](#dirty-boolean)\n - [`errors: { [field: string]: string }`](#errors--field-string-string-)\n - [`handleBlur: (e: any) => void`](#handleblur-e-any--void)\n - [`handleChange: (e: React.ChangeEvent) => void`](#handlechange-e-reactchangeeventany--void)\n - [`handleReset: () => void`](#handlereset---void)\n - [`handleSubmit: (e: React.FormEvent) => void`](#handlesubmit-e-reactformeventhtmlformevent--void)\n - [`isSubmitting: boolean`](#issubmitting-boolean)\n - [`isValid: boolean`](#isvalid-boolean)\n - [`resetForm: (nextValues?: Values) => void`](#resetform-nextvalues-values--void)\n - [`setErrors: (fields: { [field: string]: string }) => void`](#seterrors-fields--field-string-string---void)\n - [`setFieldError: (field: string, errorMsg: string) => void`](#setfielderror-field-string-errormsg-string--void)\n - [`setFieldTouched: (field: string, isTouched: boolean, shouldValidate?: boolean) => void`](#setfieldtouched-field-string-istouched-boolean-shouldvalidate-boolean--void)\n - [`submitForm: () => void`](#submitform---void)\n - [`submitCount: number`](#submitcount-number)\n - [`setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void`](#setfieldvalue-field-string-value-any-shouldvalidate-boolean--void)\n - [`setStatus: (status?: any) => void`](#setstatus-status-any--void)\n - [`setSubmitting: (isSubmitting: boolean) => void`](#setsubmitting-issubmitting-boolean--void)\n - [`setTouched: (fields: { [field: string]: boolean }) => void`](#settouched-fields--field-string-boolean---void)\n - [`setValues: (fields: { [field: string]: any }) => void`](#setvalues-fields--field-string-any---void)\n - [`status?: any`](#status-any)\n - [`touched: { [field: string]: boolean }`](#touched--field-string-boolean-)\n - [`values: { [field: string]: any }`](#values--field-string-any-)\n - [`validateForm: (values?: any) => void`](#validateform-values-any--void)\n - [`validateField: (field: string) => void`](#validatefield-field-string--void)\n - [`component`](#component)\n - [`render: (props: FormikProps) => ReactNode`](#render-props-formikpropsvalues--reactnode)\n - [`children: func`](#children-func)\n - [`enableReinitialize?: boolean`](#enablereinitialize-boolean)\n - [`isInitialValid?: boolean`](#isinitialvalid-boolean)\n - [`initialValues?: Values`](#initialvalues-values)\n - [`onReset?: (values: Values, formikBag: FormikBag) => void`](#onreset-values-values-formikbag-formikbag--void)\n - [`onSubmit: (values: Values, formikBag: FormikBag) => void`](#onsubmit-values-values-formikbag-formikbag--void)\n - [`validate?: (values: Values) => FormikErrors | Promise`](#validate-values-values--formikerrorsvalues--promiseany)\n - [`validateOnBlur?: boolean`](#validateonblur-boolean)\n - [`validateOnChange?: boolean`](#validateonchange-boolean)\n - [`validationSchema?: Schema | (() => Schema)`](#validationschema-schema----schema)\n - [``](#field-)\n - [`validate?: (value: any) => undefined | string | Promise`](#validate-value-any--undefined--string--promiseany)\n - [Refs](#refs)\n - [``](#fieldarray-)\n - [`name: string`](#name-string)\n - [`validateOnChange?: boolean`](#validateonchange-boolean-1)\n - [FieldArray Array of Objects](#fieldarray-array-of-objects)\n - [FieldArray Validation Gotchas](#fieldarray-validation-gotchas)\n - [FieldArray Helpers](#fieldarray-helpers)\n - [FieldArray render methods](#fieldarray-render-methods)\n - [`render: (arrayHelpers: ArrayHelpers) => React.ReactNode`](#render-arrayhelpers-arrayhelpers--reactreactnode)\n - [`component: React.ReactNode`](#component-reactreactnode)\n - [`
`](#form-)\n - [`withFormik(options)`](#withformikoptions)\n - [`options`](#options)\n - [`displayName?: string`](#displayname-string)\n - [`enableReinitialize?: boolean`](#enablereinitialize-boolean-1)\n - [`handleSubmit: (values: Values, formikBag: FormikBag) => void`](#handlesubmit-values-values-formikbag-formikbag--void)\n - [The \"FormikBag\":](#the-formikbag)\n - [`isInitialValid?: boolean | (props: Props) => boolean`](#isinitialvalid-boolean--props-props--boolean)\n - [`mapPropsToValues?: (props: Props) => Values`](#mappropstovalues-props-props--values)\n - [`validate?: (values: Values, props: Props) => FormikErrors | Promise`](#validate-values-values-props-props--formikerrorsvalues--promiseany)\n - [`validateOnBlur?: boolean`](#validateonblur-boolean-1)\n - [`validateOnChange?: boolean`](#validateonchange-boolean-2)\n - [`validationSchema?: Schema | ((props: Props) => Schema)`](#validationschema-schema--props-props--schema)\n - [Injected props and methods](#injected-props-and-methods)\n- [Organizations and projects using Formik](#organizations-and-projects-using-formik)\n- [Authors](#authors)\n- [Contributors](#contributors)\n\n\n\n## Guides\n\n### Basics\n\nImagine you want to build a form that lets you edit user data. However, your\nuser API has nested objects like so.\n\n```js\n{\n id: string,\n email: string,\n social: {\n facebook: string,\n twitter: string,\n // ...\n }\n}\n```\n\nWhen we are done we want our dialog to accept just a `user`, `updateUser`, and\n`onClose` props.\n\n```js\n// User.js\nimport React from 'react';\nimport Dialog from 'MySuperDialog';\nimport { Formik } from 'formik';\n\nconst EditUserDialog = ({ user, updateUser, onClose }) => {\n return (\n \n

Edit User

\n {\n CallMyApi(user.id, values).then(\n updatedUser => {\n actions.setSubmitting(false);\n updateUser(updatedUser), onClose();\n },\n error => {\n actions.setSubmitting(false);\n actions.setErrors(transformMyAPIErrorToAnObject(error));\n }\n );\n }}\n render={({\n values,\n errors,\n touched,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n }) => (\n \n \n {errors.email && touched.email &&
{errors.email}
}\n \n {errors.social &&\n errors.social.facebook &&\n touched.facebook &&
{errors.social.facebook}
}\n \n {errors.social &&\n errors.social.twitter &&\n touched.twitter &&
{errors.social.twitter}
}\n \n \n )}\n />\n \n );\n};\n```\n\nTo make writing forms less verbose. Formik comes with a few helpers to save you\nkey strokes.\n\n* ``\n* `
`\n\nThis is the **exact** same form as before, but written with `` and\n``:\n\n```js\n// EditUserDialog.js\nimport React from 'react';\nimport Dialog from 'MySuperDialog';\nimport { Formik, Field, Form } from 'formik';\n\nconst EditUserDialog = ({ user, updateUser, onClose }) => {\n return (\n \n

Edit User

\n {\n CallMyApi(user.id, values).then(\n updatedUser => {\n actions.setSubmitting(false);\n updateUser(updatedUser), onClose();\n },\n error => {\n actions.setSubmitting(false);\n actions.setErrors(transformMyAPIErrorToAnObject(error));\n }\n );\n }}\n render={({ errors, touched, isSubmitting }) => (\n \n \n {errors.email && touched.social.email &&
{errors.email}
}\n \n {errors.social.facebook &&\n touched.social.facebook &&
{errors.social.facebook}
}\n \n {errors.social.twitter &&\n touched.social.twitter &&
{errors.social.twitter}
}\n \n \n )}\n />\n \n );\n};\n```\n\n### React Native\n\n**Formik is 100% compatible with React Native and React Native Web.** However,\nbecause of differences between ReactDOM's and React Native's handling of forms\nand text input, there are two differences to be aware of. This section will walk\nyou through them and what I consider to be best practices.\n\nBefore going any further, here's a super minimal gist of how to use Formik with\nReact Native that demonstrates the key differences:\n\n```js\n// Formik x React Native example\nimport React from 'react';\nimport { Button, TextInput, View } from 'react-native';\nimport { withFormik } from 'formik';\n\nconst enhancer = withFormik({\n /*...*/\n});\n\nconst MyReactNativeForm = props => (\n \n props.setFieldValue('email', text)}\n value={props.values.email}\n />\n \n \n );\n};\n\n// The type of props MyForm receives\ninterface MyFormProps {\n initialEmail?: string;\n message: string; // if this passed all the way through you might do this or make a union type\n}\n\n// Wrap our form with the using withFormik HoC\nconst MyForm = withFormik({\n // Transform outer props into form values\n mapPropsToValues: props => {\n return {\n email: props.initialEmail || '',\n password: '',\n };\n },\n\n // Add a custom validation function (this can be async too!)\n validate: (values: FormValues) => {\n let errors: FormikErrors = {};\n if (!values.email) {\n errors.email = 'Required';\n } else if (!isValidEmail(values.email)) {\n errors.email = 'Invalid email address';\n }\n return errors;\n },\n\n handleSubmit: values => {\n // do submitting things\n },\n})(InnerForm);\n\n// Use anywhere\nconst Basic = () => (\n
\n

My App

\n

This can be anywhere in your application

\n \n
\n);\n\nexport default Basic;\n```\n\n## API\n\n### ``\n\n`` is a component that helps you with building forms. It uses a render\nprops pattern made popular by libraries like React Motion and React Router.\n\n```js\nimport React from 'react';\nimport { Formik } from 'formik';\n\nconst BasicExample = () => (\n
\n

My Form

\n {\n setTimeout(() => {\n alert(JSON.stringify(values, null, 2));\n actions.setSubmitting(false);\n }, 1000);\n }}\n render={props => (\n
\n \n {props.errors.name &&
{props.errors.name}
}\n \n \n )}\n />\n
\n);\n```\n\n#### Formik render methods\n\nThere are three ways to render things with ``\n\n* ``\n* ``\n* ``\n\n#### Formik props\n\nAll three render methods will be passed the same props:\n\n##### `dirty: boolean`\n\nReturns `true` if values are not deeply equal from initial values, `false` otherwise.\n`dirty` is a readonly computed property and should not be mutated directly.\n\n##### `errors: { [field: string]: string }`\n\nForm validation errors. Should match the shape of your form's [`values`] defined\nin `initialValues`. If you are using [`validationSchema`] (which you should be),\nkeys and shape will match your schema exactly. Internally, Formik transforms raw\n[Yup validation errors](https://github.com/jquense/yup#validationerrorerrors-string--arraystring-value-any-path-string)\non your behalf. If you are using [`validate`], then that function will determine\nthe `errors` objects shape.\n\n##### `handleBlur: (e: any) => void`\n\n`onBlur` event handler. Useful for when you need to track whether an input has\nbeen [`touched`] or not. This should be passed to ``\n\nDOM-only. Use [`setFieldTouched`] in React Native.\n\n##### `handleChange: (e: React.ChangeEvent) => void`\n\nGeneral input change event handler. This will update the `values[key]` where\n`key` is the event-emitting input's `name` attribute. If the `name` attribute is\nnot present, `handleChange` will look for an input's `id` attribute. Note:\n\"input\" here means all HTML inputs.\n\nDOM-only. Use [`setFieldValue`] in React Native.\n\n##### `handleReset: () => void`\n\nReset handler. Will reset the form to its initial state. This should be passed\nto ``\n\n##### `handleSubmit: (e: React.FormEvent) => void`\n\nSubmit handler. This should be passed to `
...
`\n\n##### `isSubmitting: boolean`\n\nSubmitting state. Either `true` or `false`. Formik will set this to `true` on\nyour behalf before calling [`handleSubmit`] to reduce boilerplate.\n\n##### `isValid: boolean`\n\nReturns `true` if the there are no [`errors`], or the result of\n[`isInitialValid`] the form if is in \"pristine\" condition (i.e. not [`dirty`])).\n\n##### `resetForm: (nextValues?: Values) => void`\n\nImperatively reset the form. This will clear [`errors`] and [`touched`], set\n[`isSubmitting`] to `false` and rerun `mapPropsToValues` with the current\n`WrappedComponent`'s `props` or what's passed as an argument. The latter is\nuseful for calling `resetForm` within `componentWillReceiveProps`.\n\n##### `setErrors: (fields: { [field: string]: string }) => void`\n\nSet `errors` imperatively.\n\n##### `setFieldError: (field: string, errorMsg: string) => void`\n\nSet the error message of a field imperatively. `field` should match the key of\n[`errors`] you wish to update. Useful for creating custom input error handlers.\n\n##### `setFieldTouched: (field: string, isTouched: boolean, shouldValidate?: boolean) => void`\n\nSet the touched state of a field imperatively. `field` should match the key of\n[`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`.\n\n##### `submitForm: () => void`\n\nTrigger a form submission.\n\n##### `submitCount: number`\n\nNumber of times user tried to submit the form. Increases when [`handleSubmit`](#handlesubmit-values-values-formikbag-formikbag--void) is called, resets after calling\n[`handleReset`](#handlereset---void). `submitCount` is readonly computed property and should not be mutated directly.\n\n##### `setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void`\n\nSet the value of a field imperatively. `field` should match the key of\n[`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`.\n\n##### `setStatus: (status?: any) => void`\n\nSet a top-level [`status`] to anything you want imperatively. Useful for\ncontrolling arbitrary top-level state related to your form. For example, you can\nuse it to pass API responses back into your component in [`handleSubmit`].\n\n##### `setSubmitting: (isSubmitting: boolean) => void`\n\nSet [`isSubmitting`] imperatively.\n\n##### `setTouched: (fields: { [field: string]: boolean }) => void`\n\nSet [`touched`] imperatively.\n\n##### `setValues: (fields: { [field: string]: any }) => void`\n\nSet [`values`] imperatively.\n\n##### `status?: any`\n\nA top-level status object that you can use to represent form state that can't\notherwise be expressed/stored with other methods. This is useful for capturing\nand passing through API responses to your inner component.\n\n`status` should only be modifed by calling\n[`setStatus: (status?: any) => void`](#setstatus-status-any--void)\n\n##### `touched: { [field: string]: boolean }`\n\nTouched fields. Each key corresponds to a field that has been touched/visited.\n\n##### `values: { [field: string]: any }`\n\nYour form's values. Will have the shape of the result of [`mapPropsToValues`]\n(if specified) or all props that are not functions passed to your wrapped\ncomponent.\n\n##### `validateForm: (values?: any) => void`\n\nImperatively 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.\n\n#### `validateField: (field: string) => void`\n\nImperatively call field's [`validate`] function if specified for given field. Formik will use the current field value.\n\n#### `component`\n\n```tsx\n;\n\nconst ContactForm = ({\n handleSubmit,\n handleChange,\n handleBlur,\n values,\n errors,\n}) => (\n
\n \n {errors.name &&
{errors.name}
}\n \n \n};\n```\n\n**Warning:** `` takes precendence over `` so\ndon’t use both in the same ``.\n\n#### `render: (props: FormikProps) => ReactNode`\n\n```tsx\n } />\n\n (\n
\n \n {errors.name &&\n
\n {errors.name}\n
}\n \n \n )}\n/>\n```\n\n#### `children: func`\n\n```tsx\n } />\n\n// or...\n\n\n {({ handleSubmit, handleChange, handleBlur, values, errors }) => (\n
\n \n {errors.name &&\n
\n {errors.name}\n
}\n \n \n )}\n
\n```\n\n#### `enableReinitialize?: boolean`\n\nDefault is `false`. Control whether Formik should reset the form if\n[`initialValues`] changes (using deep equality).\n\n#### `isInitialValid?: boolean`\n\nDefault is `false`. Control the initial value of [`isValid`] prop prior to\nmount. You can also pass a function. Useful for situations when you want to\nenable/disable a submit and reset buttons on initial mount.\n\n#### `initialValues?: Values`\n\nInitial field values of the form, Formik will make these values available to\nrender methods component as [`props.values`][`values`].\n\nEven if your form is empty by default, you must initialize all fields with\ninitial values otherwise React will throw an error saying that you have changed\nan input from uncontrolled to controlled.\n\nNote: `initialValues` not available to the higher-order component, use\n[`mapPropsToValues`] instead.\n\n#### `onReset?: (values: Values, formikBag: FormikBag) => void`\n\nYour optional form reset handler. It is passed your forms [`values`] and the\n\"FormikBag\".\n\n#### `onSubmit: (values: Values, formikBag: FormikBag) => void`\n\nYour form submission handler. It is passed your forms [`values`] and the\n\"FormikBag\", which includes an object containing a subset of the\n[injected props and methods](#injected-props-and-methods) (i.e. all the methods\nwith names that start with `set` + `resetForm`) and any props that were\npassed to the the wrapped component.\n\nNote: [`errors`], [`touched`], [`status`] and all event handlers are NOT\nincluded in the `FormikBag`.\n\n#### `validate?: (values: Values) => FormikErrors | Promise`\n\n_Note: I suggest using [`validationSchema`] and Yup for validation. However,\n`validate` is a dependency-free, straightforward way to validate your forms._\n\nValidate the form's [`values`] with function. This function can either be:\n\n1. Synchronous and return an [`errors`] object.\n\n```js\n// Synchronous validation\nconst validate = (values, props) => {\n let errors = {};\n\n if (!values.email) {\n errors.email = 'Required';\n } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)) {\n errors.email = 'Invalid email address';\n }\n\n //...\n\n return errors;\n};\n```\n\n* Asynchronous and return a Promise that's error in an [`errors`] object\n\n```js\n// Async Validation\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms))\n\nconst validate = (values, props) => {\n return sleep(2000).then(() => {\n let errors = {}\n if (['admin', 'null', 'god'].includes(values.username)) {\n errors.username = 'Nice try'\n }\n // ...\n if (Object.keys(errors).length) {\n throw errors\n }\n })\n}\n```\n\n#### `validateOnBlur?: boolean`\n\nDefault is `true`. Use this option to run validations on `blur` events. More\nspecifically, when either [`handleBlur`], [`setFieldTouched`], or [`setTouched`]\nare called.\n\n#### `validateOnChange?: boolean`\n\nDefault is `true`. Use this option to tell Formik to run validations on `change`\nevents and `change`-related methods. More specifically, when either\n[`handleChange`], [`setFieldValue`], or [`setValues`] are called.\n\n#### `validationSchema?: Schema | (() => Schema)`\n\n[A Yup schema](https://github.com/jquense/yup) or a function that returns a Yup\nschema. This is used for validation. Errors are mapped by key to the inner\ncomponent's [`errors`]. Its keys should match those of [`values`].\n\n### ``\n\n`` will automagically hook up inputs to Formik. It uses the `name`\nattribute to match up with Formik state. `` will default to an\n`` element. To change the underlying element of ``, specify a\n`component` prop. It can either be a string like `select` or another React\ncomponent. `` can also take a `render` prop.\n\n```js\nimport React from 'react';\nimport { Formik, Field } from 'formik';\n\nconst Example = () => (\n
\n

My Form

\n {\n setTimeout(() => {\n alert(JSON.stringify(values, null, 2));\n actions.setSubmitting(false);\n }, 1000);\n }}\n render={(props: FormikProps) => (\n
\n \n \n \n \n \n \n \n (\n \n )}\n />\n \n \n )}\n />\n
\n);\n\nconst CustomInputComponent: React.SFC<\n FieldProps & CustomInputProps\n> = ({\n field, // { name, value, onChange, onBlur }\n form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.\n ...props\n}) => (\n
\n \n {touched[field.name] &&\n errors[field.name] &&
{errors[field.name]}
}\n
\n);\n```\n\n#### `validate?: (value: any) => undefined | string | Promise`\n\nYou can run independent field-level validations by passing a function to the\n`validate` prop. The function will respect the [`validateOnBlur`] and\n[`validateOnChange`] config/props specified in the `'s` parent ``\n/ `withFormik`. This function can be either be:\n\n* Synchronous and if invalid, return a `string` containing the error message or\n return `undefined`.\n\n```js\n// Synchronous validation for Field\nconst validate = value => {\n let errorMessage;\n if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(value)) {\n errorMessage = 'Invalid email address';\n }\n return errorMessage;\n};\n```\n\n* async: Return a Promise that throws a `string` containing the error message.\n This works like Formik's [`validate`], but instead of returning an [`errors`]\n object, it's just a `string`.\n\n* Asynchronous and return a Promise that's error is an string with the error\n message\n\n```js\n// Async validation for Field\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\n\nconst validate = value => {\n return sleep(2000).then(() => {\n if (['admin', 'null', 'god'].includes(value)) {\n throw 'Nice try';\n }\n });\n};\n```\n\nNote: To allow for i18n libraries, the TypeScript typings for `validate` are\nslightly relaxed and allow you to return a `Function` (e.g. `i18n('invalid')`).\n\n#### Refs\n\nWhen 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.\n\n### ``\n\n`` 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. `` 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.\n\n```jsx\nimport React from 'react';\nimport { Formik, Form, Field, FieldArray } from 'formik';\n\n// Here is an example of a form with an editable list.\n// Next to each input are buttons for insert and remove.\n// If the list is empty, there is a button to add an item.\nexport const FriendList = () => (\n
\n

Friend List

\n \n setTimeout(() => {\n alert(JSON.stringify(values, null, 2));\n }, 500)\n }\n render={({ values }) => (\n
\n (\n
\n {values.friends && values.friends.length > 0 ? (\n values.friends.map((friend, index) => (\n
\n \n arrayHelpers.remove(index)} // remove a friend from the list\n >\n -\n \n arrayHelpers.insert(index, '')} // insert an empty string at a position\n >\n +\n \n
\n ))\n ) : (\n \n )}\n
\n \n
\n
\n )}\n />\n \n )}\n />\n
\n );\n```\n\n##### `name: string`\n\nThe name or path to the relevant key in [`values`].\n\n##### `validateOnChange?: boolean`\n\nDefault is `true`. Determines if form validation should or should not be run _after_ any array manipulations.\n\n#### FieldArray Array of Objects\n\nYou 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 `` or `` elements in ``.\n\n```js\n
\n (\n
\n {values.friends.map((friend, index) => (\n
\n \n // both these conventions do the same\n arrayHelpers.remove(index)}\n >\n -\n \n
\n ))}\n arrayHelpers.push({ name: '', age: '' })}\n >\n +\n \n
\n )}\n />\n\n```\n\n#### FieldArray Validation Gotchas\n\nValidation can be tricky with ``.\n\nIf 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,\n\n```js\nconst schema = Yup.object().shape({\n friends: Yup.array()\n .of(\n Yup.object().shape({\n name: Yup.string()\n .min(4, 'too short')\n .required('Required'), // these constraints take precedence\n salary: Yup.string()\n .min(3, 'cmon')\n .required('Required'), // these constraints take precedence\n })\n )\n .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied\n .min(3, 'Minimum of 3 friends'),\n});\n```\n\nSince 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.\n\nSo...to display `'Must have friends'` and `'Minimum of 3 friends'` (our example's array validation contstraints)...\n\n**_Bad_**\n\n```js\n// within a `FieldArray`'s render\nconst FriendArrayErrors = errors =>\n errors.friends ?
{errors.friends}
: null; // app will crash\n```\n\n**_Good_**\n\n```js\n// within a `FieldArray`'s render\nconst FriendArrayErrors = errors =>\n typeof errors.friends === 'string' ?
{errors.friends}
: null;\n```\n\nFor 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 `` component that looks like this:\n\n```js\nimport { Field, getIn } from 'formik';\n\nconst ErrorMessage = ({ name }) => (\n {\n const error = getIn(form.errors, name);\n const touch = getIn(form.touched, name);\n return touch && error ? error : null;\n }}\n />\n);\n\n// Usage\n; // => null, 'too short', or 'required'\n```\n\n_NOTE_: In Formik v0.12 / 1.0, a new `meta` prop may be 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.\n\n#### FieldArray Helpers\n\nThe following methods are made available via render props.\n\n* `push: (obj: any) => void`: Add a value to the end of an array\n* `swap: (indexA: number, indexB: number) => void`: Swap two values in an array\n* `move: (from: number, to: number) => void`: Move an element in an array to another index\n* `insert: (index: number, value: any) => void`: Insert an element at a given index into the array\n* `unshift: (value: any) => number`: Add an element to the beginning of an array and return its length\n* `remove(index: number): T | undefined`: Remove an element at an index of an array and return it\n* `pop(): T | undefined`: Remove and return value from the end of the array\n\n#### FieldArray render methods\n\nThere are three ways to render things with ``\n\n* ``\n* ``\n\n##### `render: (arrayHelpers: ArrayHelpers) => React.ReactNode`\n\n```jsx\nimport React from 'react';\nimport { Formik, Form, Field, FieldArray } from 'formik'\n\nexport const FriendList = () => (\n
\n

Friend List

\n (\n (\n
\n {/*... use these however you want */}\n
\n )}\n />\n />\n
\n);\n```\n\n##### `component: React.ReactNode`\n\n```jsx\nimport React from 'react';\nimport { Formik, Form, Field, FieldArray } from 'formik'\n\n\nexport const FriendList = () => (\n
\n

Friend List

\n (\n \n />\n
\n);\n\n\n// In addition to the array helpers, Formik state and helpers\n// (values, touched, setXXX, etc) are provided through a `form`\n// prop\nexport const MyDynamicForm = ({\n move, swap, push, insert, unshift, pop, form\n}) => (\n
\n {/** whatever you need to do */}\n
\n);\n```\n\n### `
`\n\nLike ``, `` is a helper component you can use to save time. It is\ntiny wrapper around ``. This\nmeans you don't need to explictly type out `` if you don't want to.\n\n**ReactDOM only**\n\n```jsx\nimport React from 'react';\nimport { Formik, Field, Form } from 'formik';\n\nconst Example = () => (\n
\n

My Form

\n {\n setTimeout(() => {\n alert(JSON.stringify(values, null, 2));\n actions.setSubmitting(false);\n }, 1000);\n }}\n component={MyForm}\n />\n
\n);\n\nconst MyForm = () => (\n \n \n \n \n \n \n \n \n \n);\n```\n\n### `withFormik(options)`\n\nCreate a higher-order React component class that passes props and form handlers\n(the \"`FormikBag`\") into your component derived from supplied options.\n\n#### `options`\n\n##### `displayName?: string`\n\nWhen your inner form component is a stateless functional component, you can use\nthe `displayName` option to give the component a proper name so you can more\neasily find it in\n[React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).\nIf specified, your wrapped form will show up as `Formik(displayName)`. If\nomitted, it will show up as `Formik(Component)`. This option is not required for\nclass components (e.g. `class XXXXX extends React.Component {..}`).\n\n##### `enableReinitialize?: boolean`\n\nDefault is `false`. Control whether Formik should reset the form if the wrapped\ncomponent props change (using deep equality).\n\n##### `handleSubmit: (values: Values, formikBag: FormikBag) => void`\n\nYour form submission handler. It is passed your forms [`values`] and the\n\"FormikBag\", which includes an object containing a subset of the\n[injected props and methods](#injected-props-and-methods) (i.e. all the methods\nwith names that start with `set` + `resetForm`) and any props that were\npassed to the the wrapped component.\n\n###### The \"FormikBag\":\n\n* `props` (props passed to the wrapped component)\n* [`resetForm`]\n* [`setErrors`]\n* [`setFieldError`]\n* [`setFieldTouched`]\n* [`setFieldValue`]\n* [`setStatus`]\n* [`setSubmitting`]\n* [`setTouched`]\n* [`setValues`]\n\nNote: [`errors`], [`touched`], [`status`] and all event handlers are NOT\nincluded in the `FormikBag`.\n\n##### `isInitialValid?: boolean | (props: Props) => boolean`\n\nDefault is `false`. Control the initial value of [`isValid`] prop prior to\nmount. You can also pass a function. Useful for situations when you want to\nenable/disable a submit and reset buttons on initial mount.\n\n##### `mapPropsToValues?: (props: Props) => Values`\n\nIf this option is specified, then Formik will transfer its results into\nupdatable form state and make these values available to the new component as\n[`props.values`][`values`]. If `mapPropsToValues` is not specified, then Formik\nwill map all props that are not functions to the inner component's\n[`props.values`][`values`]. That is, if you omit it, Formik will only pass\n`props` where `typeof props[k] !== 'function'`, where `k` is some key.\n\nEven if your form is not receiving any props from its parent, use\n`mapPropsToValues` to initialize your forms empty state.\n\n##### `validate?: (values: Values, props: Props) => FormikErrors | Promise`\n\n_Note: I suggest using [`validationSchema`] and Yup for validation. However,\n`validate` is a dependency-free, straightforward way to validate your forms._\n\nValidate the form's [`values`] with function. This function can either be:\n\n1. Synchronous and return an [`errors`] object.\n\n```js\n// Synchronous validation\nconst validate = (values, props) => {\n let errors = {};\n\n if (!values.email) {\n errors.email = 'Required';\n } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(values.email)) {\n errors.email = 'Invalid email address';\n }\n\n //...\n\n return errors;\n};\n```\n\n* Asynchronous and return a Promise that's error is an [`errors`] object\n\n```js\n// Async Validation\nconst sleep = ms => new Promise(resolve => setTimeout(resolve, ms));\n\nconst validate = (values, props) => {\n return sleep(2000).then(() => {\n let errors = {};\n if (['admin', 'null', 'god'].includes(values.username)) {\n errors.username = 'Nice try';\n }\n // ...\n if (Object.keys(errors).length) {\n throw errors;\n }\n });\n};\n```\n\n##### `validateOnBlur?: boolean`\n\nDefault is `true`. Use this option to run validations on `blur` events. More\nspecifically, when either [`handleBlur`], [`setFieldTouched`], or [`setTouched`]\nare called.\n\n##### `validateOnChange?: boolean`\n\nDefault is `true`. Use this option to tell Formik to run validations on `change`\nevents and `change`-related methods. More specifically, when either\n[`handleChange`], [`setFieldValue`], or [`setValues`] are called.\n\n##### `validationSchema?: Schema | ((props: Props) => Schema)`\n\n[A Yup schema](https://github.com/jquense/yup) or a function that returns a Yup\nschema. This is used for validation. Errors are mapped by key to the inner\ncomponent's [`errors`]. Its keys should match those of [`values`].\n\n#### Injected props and methods\n\nThese are identical to the props of ` ...} />`\n\n## Organizations and projects using Formik\n\n[List of organizations and projects using Formik](https://github.com/jaredpalmer/formik/issues/87)\n\n## Authors\n\n* Jared Palmer [@jaredpalmer](https://twitter.com/jaredpalmer)\n* Ian White [@eonwhite](https://twitter.com/eonwhite)\n\n## Contributors\n\nFormik is made with <3 thanks to these wonderful people\n([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n| [
Jared Palmer](http://jaredpalmer.com)
[πŸ’¬](#question-jaredpalmer \"Answering Questions\") [πŸ’»](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer \"Code\") [🎨](#design-jaredpalmer \"Design\") [πŸ“–](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer \"Documentation\") [πŸ’‘](#example-jaredpalmer \"Examples\") [πŸ€”](#ideas-jaredpalmer \"Ideas, Planning, & Feedback\") [πŸ‘€](#review-jaredpalmer \"Reviewed Pull Requests\") [⚠️](https://github.com/jaredpalmer/formik/commits?author=jaredpalmer \"Tests\") | [
Ian White](https://www.stardog.io)
[πŸ’¬](#question-eonwhite \"Answering Questions\") [πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3Aeonwhite \"Bug reports\") [πŸ’»](https://github.com/jaredpalmer/formik/commits?author=eonwhite \"Code\") [πŸ“–](https://github.com/jaredpalmer/formik/commits?author=eonwhite \"Documentation\") [πŸ€”](#ideas-eonwhite \"Ideas, Planning, & Feedback\") [πŸ‘€](#review-eonwhite \"Reviewed Pull Requests\") | [
Andrej Badin](http://andrejbadin.com)
[πŸ’¬](#question-Andreyco \"Answering Questions\") [πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3AAndreyco \"Bug reports\") [πŸ“–](https://github.com/jaredpalmer/formik/commits?author=Andreyco \"Documentation\") | [
Adam Howard](http://adz.co.de)
[πŸ’¬](#question-skattyadz \"Answering Questions\") [πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3Askattyadz \"Bug reports\") [πŸ€”](#ideas-skattyadz \"Ideas, Planning, & Feedback\") [πŸ‘€](#review-skattyadz \"Reviewed Pull Requests\") | [
Vlad Shcherbin](https://github.com/VladShcherbin)
[πŸ’¬](#question-VladShcherbin \"Answering Questions\") [πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3AVladShcherbin \"Bug reports\") [πŸ€”](#ideas-VladShcherbin \"Ideas, Planning, & Feedback\") | [
Brikou CARRE](https://github.com/brikou)
[πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3Abrikou \"Bug reports\") [πŸ“–](https://github.com/jaredpalmer/formik/commits?author=brikou \"Documentation\") | [
Sam Kvale](http://skvale.github.io)
[πŸ›](https://github.com/jaredpalmer/formik/issues?q=author%3Askvale \"Bug reports\") [πŸ’»](https://github.com/jaredpalmer/formik/commits?author=skvale \"Code\") [⚠️](https://github.com/jaredpalmer/formik/commits?author=skvale \"Tests\") |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------","readmeFilename":"README.md"}