Update dependency formik to v2.0.1

[renovate]

This PR contains the following updates:

Package	Type	Update	Change
formik	dependencies	patch	2.0.1-rc.13 -> 2.0.1

---

Release Notes

jaredpalmer/formik

v2.0.1

Compare Source

Formik 2 Migration Guide

Breaking Changes

Minimum Requirements

• Since Formik 2 is built on top of React Hooks, you must be on React 16.8.x or higher
• Since Formik 2 uses the unknown type, you must be on TypeScript 3.0 or higher

resetForm

There is only one tiny breaking change in Formik 2.x. Luckily, it probably won't impact verry many people. Long story short, because we introduced initialErrors, initialTouched, initialStatus props, resetForm's signature has changed. It now accepts the next initial state of Formik (instead of just the next initial values).

v1

resetForm(nextValues);

v2

resetForm({ values: nextValues /* errors, touched, etc ... */ });

What's New?

Checkboxes and Select multiple

Similarly to Angular, Vue, or Svelte, Formik 2 "fixes" React checkboxes and multi-selects with built-in array binding and boolean behavior. This was one of the most confusing things for people in Formik 1.x.

import React from 'react';
import { Formik, Field, Form } from 'formik';
import { Debug } from './Debug';

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

const CheckboxExample = () => (
  <div>
    <h1>Checkboxes</h1>
    <p>
      This example demonstrates how to properly create checkboxes with Formik.
    </p>
    <Formik
      initialValues={{
        isAwesome: false,
        terms: false,
        newsletter: false,
        jobType: ['designer'],
        location: [],
      }}
      onSubmit={async values => {
        await sleep(1000);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ isSubmitting, getFieldProps, handleChange, handleBlur, values }) => (
        <Form>
          {/* 
            This first checkbox will result in a boolean value being stored.
          */}
          <div className="label">Basic Info</div>
          <label>
            <Field type="checkbox" name="isAwesome" />
            Are you awesome?
          </label>
          {/* 
            Multiple checkboxes with the same name attribute, but different
            value attributes will be considered a "checkbox group". Formik will automagically
            bind the checked values to a single array for your benefit. All the add and remove
            logic will be taken care of for you.
          */}
          <div className="label">
            What best describes you? (check all that apply)
          </div>
          <label>
            <Field type="checkbox" name="jobType" value="designer" />
            Designer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="developer" />
            Developer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="product" />
            Product Manager
          </label>
          {/*
           You do not _need_ to use <Field>/useField to get this behaviorr, 
           using handleChange, handleBlur, and values works as well. 
          */}
          <label>
            <input
              type="checkbox"
              name="jobType"
              value="founder"
              checked={values.jobType.includes('founder')}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            CEO / Founder
          </label>

          {/* 
           The <select> element will also behave the same way if 
           you pass `multiple` prop to it. 
          */}
          <label htmlFor="location">Where do you work?</label>
          <Field
            component="select"
            id="location"
            name="location"
            multiple={true}
          >
            <option value="NY">New York</option>
            <option value="SF">San Francisco</option>
            <option value="CH">Chicago</option>
            <option value="OTHER">Other</option>
          </Field>
          <label>
            <Field type="checkbox" name="terms" />I accept the terms and
            conditions.
          </label>
          {/* Here's how you can use a checkbox to show / hide another field */}
          {!!values.terms ? (
            <div>
              <label>
                <Field type="checkbox" name="newsletter" />
                Send me the newsletter <em style={{ color: 'rebeccapurple' }}>
                  (This is only shown if terms = true)
                </em>
              </label>
            </div>
          ) : null}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
          <Debug />
        </Form>
      )}
    </Formik>
  </div>
);

export default CheckboxExample;

useField()

Just what you think, it's like <Field>, but with a hook. See docs for usage.

useFormikContext()

A hook that is equivalent to connect().

<Field as>

<Field/> now accepts a prop called as which will inject onChange, onBlur, value etc. directly through to the component or string. This is useful for folks using Emotion or Styled components as they no longer need to clean up component's render props in a wrapped function.

Misc

• FormikContext is now exported
• validateOnMount?: boolean = false
• initialErrors, initialTouched, initialStatus have been added

// <input className="form-input" placeHolder="Jane"  />
<Field name="firstName" className="form-input" placeholder="Jane" />

// <textarea className="form-textarea"/></textarea>
<Field name="message" as="textarea"  className="form-input"/>

// <select className="my-select"/>
<Field name="colors" as="select" className="my-select">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

// with styled-components/emotion
const MyStyledInput = styled.input`
  padding: .5em;
  border: 1px solid #eee;
  /* ... */
`
const MyStyledTextarea = MyStyledInput.withComponent('textarea');

// <input className="czx_123" placeHolder="google.com"  />
<Field name="website" as={MyStyledInput} placeHolder="google.com"/>

// <textarea  placeHolder="Post a message..." rows={5}></textarea>
<Field name="message" as={MyStyledTextArea} placeHolder="Post a message.." rows={4}/>

getFieldProps(nameOrProps)

There are two useful additions to FormikProps, getFieldProps and getFieldMeta. These are Kent C. Dodds-esque prop getters that can be useful if you love prop drilling, are not using the context-based API's, or if you are building a custom useField.

export interface FieldInputProps<Value> {
  /** Value of the field */
  value: Value;
  /** Name of the field */
  name: string;
  /** Multiple select? */
  multiple?: boolean;
  /** Is the field checked? */
  checked?: boolean;
  /** Change event handler */
  onChange: FormikHandlers['handleChange'];
  /** Blur event handler */
  onBlur: FormikHandlers['handleBlur'];
}

getFieldMeta(name)

Given a name it will return an object:

export interface FieldMetaProps<Value> {
  /** Value of the field */
  value: Value;
  /** Error message of the field */
  error?: string;
  /** Has the field been visited? */
  touched: boolean;
  /** Initial value of the field */
  initialValue?: Value;
  /** Initial touched state of the field */
  initialTouched: boolean;
  /** Initial error message of the field */
  initialError?: string;
}

Deprecation Warnings

All render props have been deprecated with a console warning.

For <Field>, <FastField>, <Formik>,<FieldArray>, the render prop has been deprecated with a warning as it will be removed in future versions. Instead, use a child callback function. This deprecation is meant to parallel React Context Consumer's usage.

- <Field name="firstName" render={props => ....} />
+ <Field name="firstName">{props => ... }</Field>

v2.0.1-rc.15

Compare Source

Improvements

• <Form> uses React.forwardRef now
• v1's <FastField /> is back. It's slightly fast now since it uses contextType instead of the connect HoC.
• FormikContext is exported

Buggos

• Fixed array.splice is not a function errors when using array-like item in FieldArray

Breaking Changes from 2.0.1-rc.14

• Deprecate (#​1917) 9107225

• Undeprecate (#​1915) c289eb1

• getFieldProps now only returns FieldInputProps instead of [FieldInputProps, FieldMetaProps]. This makes is more useful to folks using it with just useFormik

• getFieldMeta(name: string) has been added to formik bag. This lets you get this object back for a given field.

  export interface FieldMetaProps<Value> {
   /** Value of the field */
   value: Value;
   /** Error message of the field */
   error?: string;
   /** Has the field been visited? */
   touched: boolean;
   /** Initial value of the field */
   initialValue?: Value;
   /** Initial touched state of the field */
   initialTouched: boolean;
   /** Initial error message of the field */
   initialError?: string;
  }

Commits

• Update README.md a024117
• Add migration guide (#​1921) 360db2c
• Split out getFieldMeta into its own fn (#​1922) 7c151b0
• Bring back FastField using contextType (#​1916) c93a6d4
• Add forward ref to Form (#​1920) cb3fbe5
• Fix array.splice is not a function errors when using array-li… (#​1830) d972008
• Bump to tsdx 0.9.x (#​1919) 053482a
• Adding brightwheel to users list (#​1877) cbc19ee
• Fixing 60sec broken link (#​1918) 5ef1d5a
• Deprecate (#​1917) 9107225
• Undeprecate (#​1915) c289eb1

v2.0.1-rc.14

Compare Source

Improvements

• validateOnMount?: boolean = false (does what you think it does)
• Added CodeSandbox CI for PRs
• Validation errors are no longer swallowed
• New v2 tutorial
• You can now reinitialize touched, errors, and status by changing initialX.

Bug fixes

• Fixed useEventCallback()
• Added back SSR support

Commits

• #​1134 fix validationSchema nested object for FieldArray Validat… (#​1135) fb3e004
• Add validateOnMount (#​1913) 4ccb6b2
• v2 tutorial (#​1831) 92749ed
• Activating Open Collective (#​1892) 9d22e28
• Correct type signature of resetForm, fix initialErrors, touched… (#​1908) d72cbbf
• Replace deprecated prepublish npm script with prepublishOnly (#​1910) 526f7ad
• Add config for CodeSandbox CI (#​1802) e1f84e9
• Recursively validateYupSchema. Fix #​1520 (#​1740) 25edd71
• Stop eating validation errors (#​1846) b26aba9
• update connect() type signature (#​1797) 93647ca
• set initial value for ref in useEventCallback() (#​1826) 45b7bb9
• Allow re-initialize of errors and touched (#​1799) 3aaaef3
• Add useCallback to setFormikState (#​1820) 073ee36
• Fix typo in useFormikContext example (#​1881) 819c745
• Add link to accessibility article (#​1885) 5e23096
• Fix typos in useFormikContext.md (#​1890) 9c1ae03
• Fix a few typos (#​1852) 1e05f66
• iOS UX fix for form submittal (#​1844) 14f0455
• fix error with onChange for select-multiple (#​1848) f6adef5
• Improve documentation of setSubmitting. (#​1857) 909292d
• Create FUNDING.yml eefe964
• Update tutorial.md (#​1806) 2be1cf0
• Release Notes for Latest Version in Docs (#​1785) 44afb37
• add zauberware.com as formik user (#​1710) 26ce764
• fix setIn when deep object or array is wrong type (#​1774) 0b24613
• Update validation.md (#​1769) da9da04
• Document useFormikContext() (#​1764) 3da4858
• Fix undefined error in yupToFormErrors. (#​1767) 24ac8dd
• Kill cached directories 6d8e56d
• Use useIsomorphicLayoutEffect (#​1766) 2832282

---

Renovate configuration

📅 Schedule: At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻️ Rebasing: Whenever PR becomes conflicted, or if you modify the PR title to begin with "rebase!".

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Renovate Bot. View repository job log here.

[cypress]

---

Test summary

22 • 0 • 0 • 0

---

Run details

Project	finatr
Status	Passed
Commit	2c3d13d
Started	Oct 26, 2019 9:25 PM
Ended	Oct 26, 2019 9:27 PM
Duration	02:44 💡
OS	Linux Ubuntu Linux - 14.04
Browser	Chrome 62

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard