Sponsor
Black Lives Matter. Support Equal Justice.
Types

FormSpyProps


FormSpyProps

These are the props that you pass to <FormSpy/>. If you do not provide an onChange callback, you must provide one of the ways to render: component, render, or children.

children

(props: FormRenderProps) => React.Node

Optional. (if you specify component or render or onChange)

A render function that is given FormSpyRenderProps, as well as any non-API props passed into the <FormSpy/> component. For example, if you did...

<FormSpy someArbitraryOtherProp={42}>
  {props => {
    console.log(props.someArbitraryOtherProp) // would print 42
    return <pre>{JSON.stringify(props.values, undefined, 2)}</pre>
  }}
</FormSpy>

Note that if you specify render and children, render will be called, with children injected as if it were an additional prop.

Will not be called if an onChange callback is specified.

Related:

component

React.ComponentType<FormSpyRenderProps>

Optional. It is recommended that you use children or render.

A component that is given FormSpyRenderProps as props, as well as any non-API props passed into the <FormSpy/> component. For example, if you did...

<FormSpy
  component={MyFormSpyComp}
  someArbitraryOtherProp={42} />

const MyFormSpyComp = props => {
  console.log(props.someArbitraryOtherProp) // would print 42
  return <pre>{JSON.stringify(props.values, undefined, 2)}</pre>
}

Note that your component will be rendered using React.createElement() resulting in your component actually being in the React node tree, i.e. inspectable in DevTools.

Will not be called if an onChange callback is specified.

Related:

onChange

(formState: FormState) => void

Optional.

A change listener that will be called with form state whenever the form state, as subscribed to by the subscription prop, has changed.

When an onChange prop is provided, the <FormSpy/> will not render anything.

render

(props: FormSpyRenderProps) => React.Node

Optional. (if you specify component or children or onChange)

A render function that is given FormSpyRenderProps, as well as any non-API props passed into the <FormSpy/> component. For example, if you did...

<FormSpy
  someArbitraryOtherProp={42}
  render={props => {
    console.log(props.someArbitraryOtherProp) // would print 42
    return <pre>{JSON.stringify(props.values, undefined, 2)}</pre>
  }}
/>

Note that if you specify render and children, render will be called, with children injected as if it were an additional prop.

Will not be called if an onChange callback is specified.

Related:

subscription

{ [string]: boolean }

Optional. Advanced Usage

An object of the parts of FormState to subscribe to. If a subscription is provided, the <FormSpy/> will only rerender when those parts of form state change.

If no subscription is provided, it will default to subscribing to all form state changes. i.e. <FormSpy/> will rerender whenever any part of the form state changes.

Related: