`ReduxFormContext`

View source on GitHub

ReduxFormContext is a React.Context that allows to hook into parent redux-form. All this redux-form components use ReduxFormContext to hook into parent form.

Field
FieldArray
Fields
FormValues
FormName
FormSection

ReduxFormContext has a ReduxFormContext.Provider and a ReduxFormContext.Consumer

`ReduxFormContext.Provider`

Can be used to extend a redux-form, but this has to be done inside a redux-form, otherwise the value will be null.
Ex: FormSection component is using Provider to extend parent redux-form

`ReduxFormContext.Consumer`

Can be used to create implementation of a custom Field or other components that depend on a parent redux-form.
Consumer should be inside a redux-form that provides the ReduxFormContext.Provider, otherwise the render prop argument will be null

Importing

javascript

var ReduxFormContext = require('redux-form').ReduxFormContext // ES5

javascript

import { ReduxFormContext } from 'redux-form' // ES6

Usage

`ReduxFormContext.Provider`

tsx

import React from 'react'
import { ReduxFormContext, reduxForm, Context } from 'redux-form'

const withReduxForm = reduxForm({ form: 'form-name' })

const ExtendReduxForm = withReduxForm(props => (
  <ReduxFormContext.Consumer>
    {(reduxForm: Context) => (
      <ReduxFormContext.Provider
        {...props}
        value={{
          ...reduxForm
          // extend
        }}
      />
    )}
  </ReduxFormContext.Consumer>
))

const ExtendReduxFormUsingHooks = withReduxForm(props => {
  const reduxForm: Context = React.useContext(ReduxFormContext)

  return (
    <ReduxFormContext.Provider
      {...props}
      value={{
        ...reduxForm
        // extend
      }}
    />
  )
})

const ExtendWithoutParentReduxForm = props => (
  <ReduxFormContext.Consumer>
    {(reduxForm: Context) => (
      <ReduxFormContext.Provider
        {...props}
        value={{
          ...reduxForm
          // extend
        }}
      />
    )}
  </ReduxFormContext.Consumer>
)

`ReduxFormContext.Consumer`

tsx

import React from 'react'
import { ReduxFormContext, reduxForm, Context } from 'redux-form'

const CustomField = (props) => (
  <ReduxFormContext.Consumer>
    {(reduxForm: Context) => /* render */}
  </ReduxFormContext.Consumer>
)

const Form = reduxForm({ form: 'form-name' })((props) => (
  <form onSubmit={props.handleSubmit}>
    <CustomField />
  </form>
))