How can I integrate React Hook Form with UI libraries?

How can I integrate React Hook Form with UI libraries?

You can integrate React Hook Form with UI libraries like Material-UI, Ant Design, or Chakra UI by using their components as form inputs.

Can you give me an example with Material-UI?

Sure! You can use the Controller component from React Hook Form to wrap Material-UI components. Here's a simple example:

import { useForm, Controller } from 'react-hook-form';
import TextField from '@mui/material/TextField';

function MyForm() {
  const { control, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="myInput"
        control={control}
        defaultValue=""
        render={({ field }) => <TextField {...field} label="My Input" />}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

What about using Ant Design?

For Ant Design, you can also use the Controller component. Here's an example:

import { useForm, Controller } from 'react-hook-form';
import { Input } from 'antd';

function MyForm() {
  const { control, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="myInput"
        control={control}
        defaultValue=""
        render={({ field }) => <Input {...field} placeholder="My Input" />}
      />
      <button type="submit">Submit</button>
    </form>
  );
}