RefineDev Example

[aress31]

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

I've spent the whole day attempting to integrate @refinedev/react-hook-form with @rjsf/mui, but the absence of a registration prop on the Form makes it inaccessible for my react-hook-form to receive updates. Merely setting the onChange doesn't seem to suffice. Here's a minimal example:

const ModalForm = ({
  modalProps: {
    formState,
    getValues,
    handleSubmit,
    modal,
    register,
    refineCore,
    saveButtonProps,
    setValue,
    ...rest
  },
  supabaseColumns,
}) => {
  console.log({
    formState,
    getValues,
    handleSubmit,
    modal,
    refineCore,
    saveButtonProps,
    setValue,
    ...rest,
  });

  return (
    <Form
      schema={createSchema(supabaseColumns)}
      uiSchema={createUiSchema(supabaseColumns)}
      formData={getValues()}
      validator={validator}
      onChange={(e) =>
        Object.entries(e.formData).forEach(([key, value]) =>
          setValue(key, value)
        )
      }
    />
  );
};

Help would be appreciated - also worth documenting how to wire data with RHF.

[amabilee]

Have you tried using Controller from react-hook-form with the <Form> component from @rjsf/mui?

By using control from useForm and passing formData and setValue, it should help integrate both libraries properly.

[aress31]

A documented example would help.

This is the library (Refine.dev -> useModalForm) - https://refine.dev/docs/examples/form/mui/useModalForm/ - that I would like to integrate with.

Also, if I am not mistaken the Controller should be applied for every single field, and here only the global <Form> is exposed.

[amabilee]

Here is the implementation used. I wrapped the Form component within a Controller, which allows me to manage the form's state through react-hook-form.

https://www.react-hook-form.com/api/usecontroller/controller/

const { control, handleSubmit, setValue, getValues, formState } = useForm({
    defaultValues: {
      name: "",
      age: 0
    }
  });

  return (
    <div>
      <Controller
        name="form"
        control={control}
        defaultValue={getValues()}
        render={({ field }) => (
          <Form
            {...field}
            schema={createSchema()}
            uiSchema={createUiSchema()}
            formData={field.value}
            validator={validator}
            onChange={(e) =>
              Object.entries(e.formData).forEach(([key, value]) =>
                setValue(key, value)
              )
            }
            onSubmit={handleSubmit(onSubmit)}
          />
        )}
      />
    </div>
  );

[aress31]

Thanks for that, I have simplified my code by getting rid of react-hook-form entirely and just using rjsf instead. Could be worth adding this case to the documentation, might help someone else.

[heath-freenome]

@aress31 Can we close this issue? Also, we totally welcome people providing PRs to improve our documentation. Please see the contributing page.