react-final-form-use-field-state v1.0.0

react-final-form-use-field-state

Subscribe to the value of a single field -- without registering validators or any other side effects

Usage

npm install --save react-final-form-use-field-state

Make sure to pass the subscribeFieldState mutator to any form you want to use the useFieldState hook in.

import { subscribeFieldState } from 'react-final-form-use-field-state'

const MyForm = () => <Form mutators={{ subscribeFieldState }}>...</Form>

useFieldState(name: string, options?: { subscription?: FieldSubscription }): FieldState

import { useFieldState } from 'react-final-form-use-field-state'

A React hook that returns the state of the field with the given name. (FieldState has props like value, change, visited, etc.)

Example

import {
  subscribeFieldState,
  useFieldState,
} from 'react-final-form-use-field-state'

const ProtocolFields = () => {
  const protocol = useFieldState('protocol').value

  switch (protocol) {
    case 'modbus':
      return <ModbusFields />
    case 'mqtt':
      return <MQTTFields />
    case 'ethernet-ip':
      return <EthernetIPFields />
    default:
      return null
  }
}

const MyForm = () => (
  <Form mutators={{ subscribeFieldState }} onSubmit={console.log}>
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field
          label="Protocol"
          name="protocol"
          options={['modbus', 'mqtt', 'ethernet-ip']}
          component={Select}
        />
        <ProtocolFields />
      </form>
    )}
  </Form>
)