Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the types of react-hook-form methods?

I am using react-hook-form and I want to have certain parts of the form in an extra component. Therfore I need to pass down some methods. What are the correct typescript types of the methods: register, control, setValue, watch ?

Example Sandbox

interface INameInput {
  register: any;
  setValue: any;
  watch: any;
  control: any;
}

const NameInput: React.FC<INameInput> = (props: INameInput) => {
  const { register, control, setValue, watch } = props;

  return (
    <>
        <label>First Name</label>
        <input name="firstName" ref={register} />

        <label>Last Name</label>
        <input name="lastName" ref={register} />
    </>
  );
};

export default function App() {
  const { register, control, setValue, watch} = useForm<FormValues>();

  return (
      <form >
        <NameInput 
           register={register} 
           control={control} 
           setValue={setValue} 
           watch={watch} 
        />
      </form>
  );
}
like image 937
vuvu Avatar asked Oct 28 '25 02:10

vuvu


1 Answers

Here is a page which contains the list of exported Types

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

I think you are after the following type

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

eg:

UseFormMethods['register']
like image 180
Bill Avatar answered Oct 30 '25 18:10

Bill