Eui with react-hook-form v7

[EvaGarzonBeltran]

Hi! I've started a new project and I am using the eui library and I've tried to implement the new version of react-hook-form, version 7, but I havent been able to make it work. Is there any documentation about it? I havent found anything :(

[thompsongl]

Hey @EvaGarzonBeltran
Glad you hear you're using EUI!
I'm not familiar with react-hook-form, and it is not related to EUI in any way so we don't have any documentation on potential use.
I'm going to convert this to a Discussion and perhaps someone in the community will be able to help. We've had at least one person mention using that library: #4001

[EvaGarzonBeltran]

I used version 6 of reack-hook-form ([email protected], [email protected], @hookform/[email protected]) and I made it work. If someone has already implemented version 7, I would be very grateful for the help 🙏

[selbina]

Something like the following should work, in case anybody still needs a solution for this.
Note: I haven't tested this precise code -- it was modified from one of react-hook-form's official examples, but I have successfully used this general solution in my own code.

import React from "react";
import { useForm, Controller } from "react-hook-form";

import {
  EuiForm,
  EuiFormRow,
  EuiTextField,
} from '@elastic/eui'

export default function App() {
  const { control, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    <EuiForm
      component="form"
      onSubmit={handleSubmit(onSubmit)}
    >
      <Controller
        name="username"
        defaultValue=""
        control={control}
        rules={{ required: true }}
        render={({ field: { ref, ...fieldAttrs }, fieldState }) => (
          <EuiFormRow
            label="some field"
            isInvalid={fieldState.invalid}
            error={fieldState.error?.message}
          >
            <EuiFieldText inputRef={ref} {...fieldAttrs} isInvalid={fieldState.invalid} />
          </EuiFormRow>
        )}
      />

      <input type="submit" />
    </EuiForm>
  );
}