Typescript typing for registers as a prop.

[systemi-dongtdao]

Greetings react-hook-form.

As the title implies im having some issues with typing and react-hook-form.
Basically i have a custom component that i wish to pass down the register from useForm

// React-hook-form
7.27.1

type TMyCustomComponent = {
    register: UseFormRegister<FieldValues> 
}
export default const MyCustomComponent = ({register}): ReactElement => {
   ....
   return (
      <div>
        <input {....register("name") />
     </div> )
}

I was having issues with typing the register first but this post helped me come to the UseFormRegister<FieldValues> as an answer.

But then in the parent i was getting another error

const {register, ...} = useForm({defaultValues: {bar: ""})
<MyCustomComponent 
   register={register}
/>

Type 'UseFormRegister<{ bar: string }>' is not assignable to type
'UseFormRegister'.   Type 'FieldValues' is missing the following properties from type '{ signature: string;
is_confirmed: boolean; }': signature, is_confirmed

From the post that i first found, i thought maybe using UseFormRegister<FieldValues would fix things, but i guess there was something that needed? Maybe i didnt properly use useForm.

My apologies from my question is probably more towards typescript than maybe react-form-hook. But i was wondering if anyone can point me in the right direction and provide some guidance.

[systemi-dongtdao]

I just tried this and this seems to fix my errors but i feels like im doing something wrong.

type TMyCustomComponent = {
    register: UseFormRegisterReturn
}
export default const MyCustomComponent = ({register}): ReactElement => {
   ....
   return (
      <div>
        <input {....register} />
     </div> )
}

const {register, ...} = useForm({defaultValues: {bar: ""})
<MyCustomComponent 
   register={register("bar")}
/>

Please let me know if this is a possible solution.

[joeynguyen]

@systemi-dongtdao , that worked for me. Thanks for posting your solution!

[Kbadr1]

It works. Thanks for the solution ♥