What type is register from react-hook-form?

Question

When using react-hook-form with Typescript, there is a component that sends some props, register being one of them.

The issue is with its type when declared in an interface:

export interface MyProps {
  title: string;
  ...
  register: (string | undefined) => void;
}

Which is the correct way of declaring register here?

Also tried with:

import { RegisterOptions } from 'react-hook-form';
    export interface MyProps {
      title: string;
      ...
      register: RegisterOptions;
    }

Answer 1

if you are calling register as a prop in a custom component or to use in some custom input field in Typescript, then you can use the below code.

First of all import the UseFormRegister and FieldValues from 'react-hook-form'

import {UseFormRegister, FieldValues } from 'react-hook-form'

After that, define the type of register as

register: UseFormRegister<FieldValues>

and boom, you don't need to use 'any' type for register.

Answer 2

Try this.

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

export interface MyProps {
  title: string;
  ...
  register: (name: string, options?: RegisterOptions) => UseFormRegisterReturn;
}