erikras

import { createForm } from 'final-form'
import arrayMutators from 'final-form-arrays'

// Create Form
const form = createForm({
  mutators: {
    // potentially other mutators here
    ...arrayMutators
  },
  onSubmit

erikras

import { createForm } from 'final-form'
import createDecorator from 'final-form-calculate'

// Create Form
const form = createForm({ onSubmit })

// Create Decorator
const decorator = createDecorator(
  // Calculations:
  {

erikras

import { createForm } from 'final-form'
import setFieldData from 'final-form-set-field-data'

// Create Form
const form = createForm({
  mutators: { setFieldData },
  onSubmit
})

form.mutators.setFieldData('firstName', { awesome: true })

erikras

const WarningEngine = ({ mutators: { setFieldData } }) => (
  // FormSpy lets you listen to any part of the form state you want.
  // If you provide an onChange prop, FormSpy will not render to the DOM.
  <FormSpy
    subscription={{ values: true }}
    onChange={({ values }) => {
      setFieldData('firstName', {
        warning: values.firstName ? undefined : 'Recommended'
      })
      setFieldData('lastName', {

erikras

import React from 'react'
import { Form, Field } from 'react-final-form
import createDecorator from 'final-form-focus'

const focusOnErrors = createDecorator()
...
<Form
  onSubmit={submit}
  decorators={[ focusOnErrors ]} // <--------- 😎
  validate={validate}

erikras

const WhenFieldChanges = ({ field, becomes, set, to }) => (
  <Field name={set} subscription={{}}>
    {(
      // No subscription. We only use Field to get to the change function
      { input: { onChange } }
    ) => (
      <OnChange name={field}>
        {value => {
          if (value === becomes) {
            onChange(to)

erikras

<MakeAsyncFunction
  listener={promiseListener}
  start="START_ACTION_TYPE"     // the type of action to dispatch when this function is called
  resolve="RESOLVE_ACTION_TYPE" // the type of action that will resolve the promise
  reject="REJECT_ACTION_TYPE"   // the type of action that will reject the promise
>{asyncFunc => (
  <SomeFormLibrary onSubmit={asyncFunc}>

    ...

erikras

function focusOnFirstError(formName, hasError) {
  const form = document.forms[formName]
  for (let i = 0; i < form.length; i++) {
    if (hasError(form[i].name)) {
      form[i].focus()
      break
    }
  }
}

erikras

/*
 * As I have been migrating a project from redux-form v5 to v6, I have come across this useful pattern.
 *
 * I have many such "custom inputs and errors beside them" structures around my app.
 */
 
// v5 code
<div>
  <MyCustomInputThing
    {...myField}

erikras

componentWillReceiveProps(nextProps) {
  if(!this.props.deadDrop && nextProps.deadDrop) {
    // dispatch an action to clear the value
    this.props.clearDeadDrop()
    
    // do what your case officer has instructed, Agent
    this.performOperation(nextProps.deadDrop)
  }
}