What type is register from react-hook-form?

user_9099077 0
Viewed 2245

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;
    }
typescript-typings react-hook-form typescript reactjs javascript
3 Answers

You can retrieve register type from UseFormReturn.

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

export interface MyProps {
  title: string;
  register: UseFormReturn['register'];
}

At react-hook-form, we recommend to forward ref instead of passing register method.

user_49730760

Try this.

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

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

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.

user_176322510
Related