Creating a reusable form component in typescript with function overloading

[ben519]

Recently struggled to create a re-useable, modular component of form inputs. For example, something like

export function AddressFields({...}) {
   // street address
   // city input
   // state
}

that I could incorporate into multiple, broader forms. I ended up getting this to work with function overloading.

Thought I'd drop my code here for others (and future me).

// AddressComponent.tsx

interface AnyObject {
  [key: string]: any
}

interface AddressProps<T extends FieldValues> {
  className?: string
  control: Control<T>
  errors: FieldErrors<T>
  register: UseFormRegister<T>
  setValue: UseFormSetValue<T>
}

export function Address({
  className,
  control,
  errors,
  register,
  setValue,
}: AddressProps<EmployeeFormData>): JSX.Element
export function Address({
  className,
  control,
  errors,
  register,
  setValue,
}: AddressProps<EmployerFormData>): JSX.Element
export function Address(props: AnyObject): JSX.Element {

  const { className, control, errors, register, setValue } =
    props as AddressProps<EmployeeFormData | EmployerFormData>
  
  const myStateField = register("state")
  const myAddressFieldArray = useFieldArray({ control, name: 'addresses' })

  // more code here...
}

In this example, EmployeeFormData and EmployerFormData are hypothetical typescript interfaces used when you declare your form with useForm(). For example, something like

interface EmployeeFormData {
  name: string
  age: number,
  state: string,
  addresses: { address: string, zipcode: number }[]
}

export function EmployeeForm({...}) {

  const {
    control,
    errors,
    register,
    setValue,
  } = useForm<EmployeeFormData>({ defaultValues })

  return (
     ...
    <Address 
        control = { control },
        errors = { errors },
        register = { register },
        setValue = { setValue },
     />
    ...
  )
}

I'm very new to Typescript.. Use this at your own risk!