How can I use React Hook Form with TypeScript?

How can I use React Hook Form with TypeScript?

You can use React Hook Form with TypeScript by defining your form data types and using the useForm hook with generics.

Can you show me a simple example?

Sure! Here's a basic example:

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

interface FormData {
  firstName: string;
  lastName: string;
}

const MyForm = () => {
  const { register, handleSubmit } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <input {...register('lastName')} />
      <button type="submit">Submit</button>
    </form>
  );
};

This defines a form with first and last name fields.

What are the benefits of using TypeScript with React Hook Form?

Using TypeScript with React Hook Form provides type safety, better autocompletion, and helps catch errors during development.