formik

Breaking Changes 🚨

• getFieldProps now takes an object instead of just a string.
• (TypeScript only) Formik has an unknown type now. Please upgrade accordingly.
• validate and validationSchema no longer swallow errors
• Non-Yup validationSchema errors are no longer swallowed
• A runtime error (or rejected validation) will now abort a submit and also throw. You should catch this with an error boundary or your own async validation function.
• Custom async validation should no longer throw an object, but should instead resolve an object containing errors.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const validate = (values) => {
  return sleep(2000).then(() => {
    let errors = {};
    if (['admin', 'null', 'god'].includes(values.username)) {
      errors.username = 'Nice try';
    }
    // ...
-    if (Object.keys(errors).length) {
-       throw errors
-    }
+    return errors;
  });
};

Bugfixes 🐛

• Fixed enableReinitialize regression in rc4. It works now.
• Fixed regression against v1.x where certain helper methods would be created on every update, preventing users from debouncing these methods.
• Fix curried overloads of handleChange and handleBlur.

New Stuff ✨

• Upgraded to TS 3.5.x
• Formik + <Field>/useField now handles checkboxes and multiple select like Vue, Svelte, and Angular (by binding to an array).
• You can now pass an object (i.e. props) to useField(). It will use name, type, and value to figure out which props it should return to you. This enables the aforementioned new behaviors.

Checkboxes

// Single checkbox, boolean value.
<Field type="checkbox" name="newsletter" /> // => true/false

// Multiple checkboxes, bound to the same Array.
<Field type="checkbox" name="colors" value="red" /> 
<Field type="checkbox" name="colors" value="green" /> 
<Field type="checkbox" name="colors" value="blue" />  
// => so if they are all checked, will be stored as 
// { colors: ["red", "green", "blue"] } 
// checking/unchecking will add/remove item from the array

Select

// Single select 
<Field name="car" as="select">
  <option>Please select one</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</Field>

// Multiple select (bound to an Array)
<Field name="car" as="select" multiple>  
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</Field> // => { car: ['saab', 'opel', 'audi'] }

Commits

• [v2] Add support for checkboxes and multiple select (#1555) e399d6d
• [v2] Breaking: Change async validate to resolve errors (#1575) 54fb3fe
• [v2] Upgrade to TS 3.5.x (#1559) d29775d
• Fix initialValues ref when enableReinitialize is true (#1570) b91a272
• Merge pull request #1596 from Rahmon/patch-1 5e97f22
• Change the DEV global from true to "boolean" 0a63400
• Remove unused index.js (#1595) 1f8a5ac
• Remove unused index.js 68474b8
• Update to use DEV constant (#1594) 2f3d628
• Update to use DEV constant ee7f0c3
• 👌 remove reinitialize example 5e4367a
• Mimic class properties with useEventCallback (#1566) e51f09a
• 🐛 enableReinitialize works now 73e9ec0
• Fix curried overloads of handleChange and handleBlur cc97f33
• Add useEventCallback and autosave example 1fd9580
• Remove useFormik from exports for now 076b3b0

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.4...v2.0.1-rc.5

Bugfix

• Fix resetForm(nextState) behavior to match docs.

Commits

• Resetting a form using the nextState-argument sets errors and touched to nextState.values (#1563) e5b2611
• Resetting a form using the nextState-argument sets errors and touched to nextState.values f5f7e76

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.3...v2.0.1-rc.4

Bugfixes

• Fixed TS broken build from 2.0.1-rc.2. Formik.d.ts was somehow not included.
• Fix <Field children> warning

Commits

• Remove unused includes in tsconfig.json bc81fd2
• Don't show warning without (#1564) bacc113

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.2...v2.0.1-rc.3

Improvements 🔥

• Better build output thanks to tsdx v0.6.0
• Rearchitected validation and to make it fully backwards compatible with v1
• Formik now uses the new scheduler package to improve performance. Validation now comes in 2 flavors. Validation triggered imperatively (via validateForm or validateField) and prior to submit will run at the default priority (same behavior as before). Formik will now schedule validation that run as a side effect in response to calling handleChange, setFieldValue, setValues, handleBlur, setFieldTouched, or setTouched at low-priority. The goal is tell the browser that these validation updates should never block user input (changes to values). Since we are using scheduler directly, it's been added to Formik's deps. For power users, you should watch Brandon Dail's React Europe talk about scheduler.

Commits

• Upgrade to tsdx 0.6.0 64ab584
• [v2]: Distinguish between high/low priority validation (#1522) 123e392

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.1...v2.0.1-rc.2

Bugfix

• Fixed cjs bulids since last rc #1523

Commits

• Bump to tsdx 0.5.12 bfcdba4
• Upgrade to storybook 5 701643e

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.0...v2.0.1-rc.1

Patch

• Provide better typing for isInitialValid method when using withFormik

Commits

• Provide better typing for isInitialValid method when using withFormik (#1490) b6c630d
• Add version for 1.4.4 patch 1cccc6c

https://github.com/jaredpalmer/formik/compare/v1.5.6...v1.5.7

First v2 Release Candidate!

• Fixed issues with @types/hoist-non-react-statics

Commits

• Merge branch 'master' into hooks 3378b58
• Add version for 1.4.4 patch 1cccc6c
• v1.5.6 b81ebd8
• Cast hoist in connect() to R.CompType cb443e2
• Bump react types and fix hoist-non-react-statics? f6cfa09
• Merge branch 'master' into hooks 2bc08b7
• Bump docs to 1.5.5 7c0236b
• v1.5.5 1d2c08e
• Fix TS build and remove types for hoist-non-react-statics (#1521) 34a0805
• Fixed typo (#1518) 47af0f4
• Move to @palmerhq/tsdx (#1516) 902a40a
• Bump deps for hoist (#1514) c63d38f
• Merge branch 'master' into hooks 0872e62
• Upgrade hoist-non-react-statics to v3.3.0 (#1502) fc36095
• Merge branch 'master' of github.com:jaredpalmer/formik b745c8a
• Add new users a260256
• Fix typo in example. (#1501) 050512b
• Add versions 9ce3757
• v1.5.4 f4dbc3d

https://github.com/jaredpalmer/formik/compare/v2.0.1-alpha.5...v2.0.1-rc.0

Patch

• Remove the need for lazy imports in typedefs because TypeScript is funsies.

Commits

• Fix TS types with create-react-context bdc7246

https://github.com/jaredpalmer/formik/compare/v1.4.3...v1.4.4

Patch

Fix types for connect() for realz.

1.5.5 vs. 1.5.6

// connect.d.ts
import * as React from 'react';
import { FormikContext } from './types';
export declare const FormikProvider: React.ProviderExoticComponent<React.ProviderProps<FormikContext<any>>>, FormikConsumer: React.ExoticComponent<React.ConsumerProps<FormikContext<any>>>;
export declare function connect<OuterProps, Values = {}>(Comp: React.ComponentType<OuterProps & {
    formik: FormikContext<Values>;
-}>): any;
+}>): React.ComponentType<OuterProps>;

Commits

• Cast hoist in connect() to R.CompType cb443e2
• Bump docs to 1.5.5 7c0236b

https://github.com/jaredpalmer/formik/compare/v1.5.5...v1.5.6

Patch

• Updated to latest version of hoist-non-react-statics
• Removed internal (and effectively redundant typedefs for @types/hoist-non-react-statics) which caused pain and sadness for TS users. We were not really using the type defs anyways since we were casting the output to React.SFC. This was causing the type declarations to have dynamic type imports and even some triple slash directives. 😭😭😭

Luckily, this is fixed now.

Commits

• Fix TS build and remove types for hoist-non-react-statics (#1521) 34a0805
• Fixed typo (#1518) 47af0f4
• Bump deps for hoist (#1514) c63d38f
• Upgrade hoist-non-react-statics to v3.3.0 (#1502) fc36095
• Merge branch 'master' of github.com:jaredpalmer/formik b745c8a
• Add new users a260256
• Fix typo in example. (#1501) 050512b
• Add versions 9ce3757

https://github.com/jaredpalmer/formik/compare/v1.5.4...v1.5.5

Smoke test for moving to @palmerhq/tsdx

Improvements

You can now nest <Formik>/<Form> components in React DOM. This is useful for building accessible modal forms within larger forms.

Commits

• Call stopPropagation() if present on submits (#1515) c51dfd9
• Remove component usage from example 2987359
• Ensure that warnings only run on mount once! ead448c

https://github.com/jaredpalmer/formik/compare/v2.0.1-alpha.4...v2.0.1-alpha.5

• Only warn about deprecations in development 527fee4

https://github.com/jaredpalmer/formik/compare/v2.0.1-alpha.3...v2.0.1-alpha.4

Improvements

• Deprecated isInitialValid and finally fixed isValid
• Added initialXXXX
• Implemented useCallback

Commits

• Fix version 0fa816b
• Update circle node version 157bc69
• Implement useCallback properly 2a08d5e
• Use eslint-typescript from CRA 46ceb86
• Revert "Use useCallback everywhere" 60becbe
• Revert "Fix withFormik" 0ca5dbd
• Fix withFormik a8f75fd
• Use useCallback everywhere bd077e6
• Merge branch 'master' into hooks 198ab0e
• Change setIn to use clone instead of cloneDeep. (#1235) d34537b
• Upgrade to 16.9, THANKYOU KENTCDODDS AND SUNIL!!! 630ea14
• Fix useField example syntax highlight (#1451) 47cfc2f
• Fix up a rogue search and replace b838b27
• Merge branch 'master' into hooks 04bf37f
• Add initialXXXX and fix isValid (#1410) 4332637
• Add Campusjäger to users (#1466) d74805d
• Fixed error message in Field.tsx (#1434) afa001f

Improvements

Internally, Formik uses an undocumented utility function called setIn to support deep state updates (and nested fields). In this release, we altered the behavior of setIn to shallow copy unchanged siblings along the update path to be updated instead of deeply cloning the whole object.

This should enable significant performance improvements when implementing
shouldComponentUpdate methods for nested structures as it allows direct
comparison of object / arrays to see if there has been changes to any of
their child values (because unchanged objects retain the same JS
reference).

Commits

• Change setIn to use clone instead of cloneDeep. (#1235) d34537b
• Add Campusjäger to users (#1466) d74805d

https://github.com/jaredpalmer/formik/compare/v1.5.3...v1.5.4

Improvements

• setIn keeps class inheritance for the top level object (#1429) 316023b

Commits

• Update formik.md (#1423) 4dbb93f
• Remove extraneous Markdown markers in docs (#1440) 77eddec
• bugfix Storybook ts config added bugfix/jaredpalmer/formik#1431 Misspelled filename fixed (#1435) 1de8b43
• setIn keeps class inheritance for the top level object (#1429) 316023b
• bugfix Storybook ts config added bugfix/jaredpalmer/formik#1431 (#1432) ae88fc5
• Correct type description on Field.render input properties (#1416) 22db39c
• Add NOAA and NASA to users on website 50882a2
• Docusaurus 1.8.x a940e37
• Update link to Expo Snack 481aead
• Update link to Expo Snack 3d2007f
• Update formik.md v1.5.2 8c5fcf8
• Fix #1021 (#1232) 82d6650
• Let TS infer return type of getFormikContext() (#1413) c524394
• Add 1.5.2 docs 9d03575

https://github.com/jaredpalmer/formik/compare/v1.5.2...v1.5.3

Fixes 🐛

• <Field>'s deprecation warnings (for render and component props) now only run one time (when the component mounts). Sorry about that!

Commits

• Only show deprecation warnings when Field mounts (#1414)

Improvements 🔥

• Add new <Field as> prop that passes Formik input-related props straight through.
• Add a new meta object to <Field children> with field-level metadata.

Fixes 🐛

• Fix enableReinitialize regression from alpha.0

Deprecations ⚠️

• Deprecate <Field render> via warning.
• Deprecate <Field component> via warning.

Breaking Change from alpha.0 🚨

• Changed the name of meta.touch to meta.touched, where meta is the second element of the tuple returned by useField.

import React from 'react';
import { useField } from 'formik';

const MyTextField = ({ label, ...props }) => {
  const [field, meta] = useField(props.name);
  return (
    <>
      <label>
        {label}
        <input {...field} {...props} />
      </label>
-      {meta.touch && meta.error ? (
+      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

Commits

• [v2] Revert missing enableReinitialize in useFormik hook (#1399)
• [v2] Update and document field meta prop (#1409)
• [v2] Remove prod check before useField warning
• Create <Field as> and deprecate <Field component> and <Field render> (#1406)
• Add deprecation warning to <Field render>

Improvements

• Improve handling and types of non-event values in the overloaded handleChange and handleBlur methods so that they can more easily be used with React Native (Web) and other renderers. (#1216)

• Fixed unwanted warnings in useField (#1348)