TypeScript: What type for register (instead of any) when calling it as a prop? #4426

ptmkenny · 2021-03-15T06:20:24Z

ptmkenny
Mar 15, 2021

I read the TypeScript documentation, but I don't understand which type to use for register when using it as a prop. This is probably a very easy question but I'm relatively new to TypeScript and would appreciate any help.

For example:

interface MyProps {
  register: any, // What type should I use here?
}

const UserFormHandedness: React.VFC<MyProps> = ({ register }: MyProps) => (
  <IonItem>
    <IonSelect
      ref={register}
      id="edit-field-handedness"
      name="field_handedness"
    >
      <IonSelectOption value="r">Right-handed</IonSelectOption>
      <IonSelectOption value="l">Left-handed</IonSelectOption>
    </IonSelect>
  </IonItem>
);

Answered by ritikbanger

Nov 12, 2021

Hello @ptmkenny, if you are calling register as a prop in a custom component or in some custom form 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.

View full answer

bluebill1049 · 2021-03-15T07:03:26Z

bluebill1049
Mar 15, 2021
Maintainer

https://react-hook-form.com/ts#UseFormMethods

UseFormMethods['register']

2 replies

whompyjaw Jan 13, 2022

You provide this link, but nowhere is UseFormMethods['register'] located on that page? And no longer is UseFormMethods even.

whompyjaw Jan 13, 2022

Would: https://react-hook-form.com/ts#UseFormProps be the new solution?

ptmkenny · 2021-03-15T08:58:11Z

ptmkenny
Mar 15, 2021
Author

What if I call the component like <UserFormHandedness register={register({ required: true })} />?

This causes an error like:

<html>TS2322: Type '(ref: (HTMLSelectElement & HTMLTextAreaElement & CustomElement<FieldValues> & HTMLInputElement) | null) => void' is not assignable to type '{ <TFieldElement extends FieldElement<FieldValues>>(rules?: Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; ... 7 more ...; setValueAs: (value: any) => any; }> | undefined): (ref: (TFieldElement & Ref) | null) => void; (name: string, rules?: Partial<...> | undefined): void...'.<br/>Types of parameters 'ref' and 'rules' are incompatible.<br/>Type 'Partial<{ required: string | ValidationRule<boolean>; min: ValidationRule<string | number>; max: ValidationRule<string | number>; ... 6 more ...; setValueAs: (value: any) => any; }> | undefined' is not assignable to type '(HTMLSelectElement & HTMLTextAreaElement & CustomElement<FieldValues> & HTMLInputElement) | null'.<br/>Type 'undefined' is not assignable to type '(HTMLSelectElement & HTMLTextAreaElement & CustomElement<FieldValues> & HTMLInputElement) | null'.

0 replies

dagstuan · 2021-03-23T15:56:02Z

dagstuan
Mar 23, 2021

as @ptmkenny mentions. UsingUseFormMethods['register'] only works if one passes register directly to the child. What should be used when passing props such as register={register({ required: true })} @bluebill1049 ?

0 replies

ptmkenny · 2021-04-17T04:29:09Z

ptmkenny
Apr 17, 2021
Author

After upgrading to V7, it looks like the way to do this now is:
register: UseFormRegister<MyInterface>,

5 replies

jmayergit Oct 20, 2021

The problem with you answer is MyInterface should not be defined in the Input component. Imagine having to import all the interfaces into your Input component, from the consumers of the Input component who define those interfaces..

ptmkenny Nov 4, 2021
Author

@jmayergit I'd be happy to see a better way if you've found one.

Kevin-Carlos Nov 4, 2021

I think it'd be the same for control. (note haven't tested this for register)

type MyType<T extends FieldValues> = {
  register: UseFormRegister<T>;
}

which I think might work since the signature is: export declare type UseFormRegister<TFieldValues extends FieldValues>...

ptmkenny Nov 5, 2021
Author

@Kevin-Carlos Ok, based on your example, I was able to do this:

interface MyProps<T extends FieldValues> {
  register: UseFormRegister<T>,
}

const MyInput: React.VFC<MyProps<MyInterface>> = ({ register }: MyProps<MyInterface>) => (

But, previously I have been doing this:

interface MyProps {
  register: UseFormRegister<MyInterface>,
}

const MyInput: React.VFC<MyProps> = ({ register }: MyProps) => (

which seems much less verbose.

I don't understand the use of <T> very well, so what's the benefit of this approach?

Kevin-Carlos Nov 11, 2021

Benefit of this approach is that you're specifying your input component generically so that the typing can be inferred:

Note: Am using control here as my example since I'm trying to figure out how to generically type my components that use control, but the sentiment and props are mostly built using the same generics under the hood in RHF.

Notice how when I hover over control though, it has the same typings as what I declared in the useForm.

Same as if I actually declare the form value typings in a type/interface

ritikbanger · 2021-11-12T06:44:33Z

ritikbanger
Nov 12, 2021

Hello @ptmkenny, if you are calling register as a prop in a custom component or in some custom form 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.

13 replies

DiFuks · 2023-08-08T17:51:45Z

DiFuks
Aug 8, 2023

Still have problem :( https://codesandbox.io/s/react-hook-form-control-forked-w39qfq?file=/src/App.tsx

0 replies

uKiJo · 2023-10-04T22:37:28Z

uKiJo
Oct 4, 2023

i'm still getting Type UseFormRegister<Type> is not assignable to type UseFormRegister<FieldValues>,, any solution to that?

1 reply

omeryaz Jan 18, 2024

I have been able to solve this issue with the following setup:

Input Props:

export interface InputProps<T extends FieldValues>{
  name: Path<T>;
  register: UseFormRegister<T>;
// ...rest of the types
}

Input Component:


const Input = <T extends FieldValues>({
  name,
  register,
// ...rest of the props
}: InputProps<T>) => (
    <InputWrapper >

      <StyledInput
        {...register(name)}
      />

    </InputWrapper>
);


export default Input;

Form Setup:

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SignupFormValues>({
    defaultValues: {
      email: '',
      password: '',
      phoneNumber: '',
    },
    resolver: yupResolver(validationSchema),
  });

Input Use:

<Input
   name="email"
   register={register}
 />

It works with both of my forms:

Version 7.49.2 of react-hook-form

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Hook Form

TypeScript: What type for register (instead of any) when calling it as a prop? #4426

{{title}}

Replies: 7 comments 21 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

TypeScript: What type for register (instead of any) when calling it as a prop? #4426

Replies: 7 comments · 21 replies

bluebill1049 Mar 15, 2021 Maintainer

ptmkenny Mar 15, 2021 Author

ptmkenny Apr 17, 2021 Author

ptmkenny Nov 4, 2021 Author

ptmkenny Nov 5, 2021 Author

Replies: 7 comments 21 replies

bluebill1049
Mar 15, 2021
Maintainer

ptmkenny
Mar 15, 2021
Author

ptmkenny
Apr 17, 2021
Author

ptmkenny Nov 4, 2021
Author

ptmkenny Nov 5, 2021
Author