react-hook-form: register type-definition

November 21, 2022

I am using "react-hook-form": "^7.39.5" and couldn’t figure out how to correctly set the type of register.

index.tsx

const Index = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    getValues,
    setValue,
  } = useForm<FormInputs>({
    resolver: yupResolver(formSchema),
  })
  const onSubmit = (data: FormInputs) => console.log(data)

  return(
  <FormInput
    label={label}
    register={{ ...register('firstName') }}
    errorMessage={errors['firstName']?.message}
   />
  )

  export default React.memo(Index)

}

FormInput.tsx

type FormInputProps = {
  label: string
  register: any // <-- I NEED THIS TO BE TYPED
  errorMessage?: string
  type?: string
}

const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={errorMessage && errorMessage?.length > 0}
      />
    </FormLayout>
  )
}

export default React.memo(FormInput)

I need register from the FormInputProps to by typed instead of "any". I tried several things to give the correct type but it can’t just helped

>Solution :

You can use built-in type from react-hook-form called UseFormRegisterReturn and the other point I see in the code is that useForm is being use like this:

useForm<FormInputs>({
    resolver: yupResolver(formSchema),
  })

Which you need to pass the type of form values as the generic input, which depends on your form values could be something like:

type FieldValues = {
  firstName: string;
  //... other values
};

An overall picture of what the solution might look like is here:

import { useForm, UseFormRegisterReturn } from "react-hook-form";

type FieldValues = {
  firstName: string;
  //... other values
};

export default function App() {
  const {
    register,
    formState: { errors }
  } = useForm<FieldValues>();

  return (
    <FormInput
      label={"label"}
      register={{ ...register("firstName") }}
      errorMessage={errors["firstName"]?.message}
    />
  );
}

type FormInputProps = {
  label: string;
  register: UseFormRegisterReturn;
  errorMessage?: string;
  type?: string;
};

const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={errorMessage && errorMessage?.length > 0}
      />
    </FormLayout>
  );
};