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;
}
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.
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.
Try this.
import { RegisterOptions, UseFormRegisterReturn } from 'react-hook-form';
export interface MyProps {
title: string;
...
register: (name: string, options?: RegisterOptions) => UseFormRegisterReturn;
}