Formik - useFormikContext and useField hooks

4/22/2020
#formik, #react, #context

As I’m using Formik to build forms inside React applications below there are some patterns you may enjoy.

Form

Let’s say that you have a form build using formik:

import React, { FunctionComponent } from 'react';
import { Formik, FieldProps, Field } from 'formik';

type FormValues = {
  name: string;
  email: string;
};

const UserForm: React.FunctionComponent = () => {
  return (
    <Formik<FormValues>
      initalValues={{ name: '', email: '' }}
      onSubmit={(values) => sendDataToAPI(values)}
    >
      {(props) => (
        <form onSubmit={props.onSubmit}>
          <Field name="name">
            {({ field }: FieldProps<FormValues>) => <CustomInput {...field} />}
          </Field>
          <Field name="email">
            {({ field }: FieldProps<FormValues>) => <CustomInput {...field} />}
          </Field>
        </form>
      )}
    </Formik>
  );
};

const CustomInput: React.FunctionComponent<JSX.IntrinsicElements['input']> = ({ ...props }) => (
  <input {...props} />
);

useField

I want to start with useField. Previously to create a field in formik you have to first create a Field component and then pass children render prop:

import { FieldProps, Field } from 'formik';

<Field name="name">{({ field }: FieldProps<FormValues>) => <CustomInput {...field} />}</Field>;

In 2.0.0 version maintainers introduced a new hook useField. It can be use to abstract that Field underneath is CustomInput:

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

const FormikCustomInput: React.FunctionComponent<{ name: string }> = ({ name }) => {
  const [field] = useField(name);
  return <CustomInput {...field} />;
};

And then use it inside UserForm:

<form onSubmit={props.onSubmit}>
  <FormikCustomInput name="name" />
  <FormikCustomInput name="email" />
</form>

Where you can use it? In a place where you have multiple forms that use the same Fields.

useFormikContext

Another addition is useFormikContext. This is a Formik hook to get formikBag (formik values, errors and helpers) in your component. In previous versions you had to use connect to get your component into Formik context. Thanks to this new hook - there is no need for that. Where it can be useful? Inside nested forms when you don’t want to have prop drilling problem.

Summary

Formik added two new hooks: useField and useFormikContext to ease creating reusable and nested forms. Be sure to check them out!


Webmentions

💙 0  💬 0