formik 2.0.1-rc.5

on Node.js NPM

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

v2.0.1-rc.4...v2.0.1-rc.5