React HOC to handle refs

withRefs.ts

import { withStateHandlers } from 'recompose'
import { ReactNode } from 'react';

type Ref = ReactNode
type RefsState = {}
type RefsHandlers = {
  setRef: (fieldName: string, ref: Ref) => undefined
  focusRef: (fieldName: string) => undefined
}
export type RefsProps = RefsHandlers & RefsState

export const createRefHandlers = () => {
  const refs = {}

  // we use closure so that `refs` object does not clash with other hoc users
  const withRefs = withStateHandlers<RefsState, RefsHandlers>(
    {},
    {
      setRef: state => (fieldName, ref) => {
        refs[fieldName] = ref
        return undefined
      },
      focusRef: state => fieldName => {
        if (refs[fieldName]) {
          refs[fieldName].focus()
        }
        return undefined
      }
    }
  )
  return withRefs
}