Ref adapter utility

[ViieeS]

May be useful for those using React-Select, AntD, Material-UI, etc.

import {UseFormRegisterReturn} from 'react-hook-form';

// The adapter address an issue when components expose ref name differently (eg. innerRef, inputRef, etc.).
export const refAdapter = (registerReturn: UseFormRegisterReturn, refName: string) => {
  const {ref, ...rest} = registerReturn;
  return {
    [refName]: ref,
    ...rest
  }
}

Usage

import {Input} from 'reactstrap';

<Input
  {...refAdapter(
    register('fieldName', {
      valueAsNumber: true
    }),
    'innerRef'
  )}
  type="select"
>

[bluebill1049]

Thanks for sharing! This is great.