connect() is a higher-order component (HoC) that allows you to hook anything into the Form context. It is used internally to construct <Field> and <Form>, but you can use it to build out new components as your needs change.

Type signature

connect<OuterProps, Values = any>(Comp: React.ComponentType<OuterProps & { FORM: FormContext<Values> }>) => React.ComponentType<OuterProps>


import React from 'react';
import { connect, getIn } from 'form';
// This component renders an error message if a field has
// an error and it's already been touched.
const ErrorMessage = props => {
// All FormProps available on props.form
const error = getIn(props.form.errors,;
const touch = getIn(props.form.touched,;
return touch && error ? error : null;
export default connect(ErrorMessage);