correct-apricot•3mo ago

useForm create subcomponent using typescript

How can I make sub-component/composable using useform with the react-hook-form integration. Can I use formprovider and useFormContext for instance?

2 Replies

kapa.ai•3mo ago

Hi @Todilo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can create sub-components (composables) using the React Hook Form integration in Refine, and you can use both FormProvider and useFormContext for this purpose. While the knowledge sources do not provide a full example of using FormProvider and useFormContext specifically within Refine, they do confirm that Refine's @refinedev/react-hook-form adapter supports all features of React Hook Form, and you can use any React Hook Form example as-is in your Refine project. This includes advanced composition patterns like FormProvider and useFormContext, which are standard in React Hook Form for sharing form context across deeply nested components Refine React Hook Form integration. Here’s a general outline of how you would structure this: 1. Create your form with useForm from @refinedev/react-hook-form. 2. Wrap your form and sub-components with FormProvider. 3. Use useFormContext in sub-components to access form methods and state. Example (adapted for Refine, based on React Hook Form patterns):

import { useForm, FormProvider, useFormContext } from "@refinedev/react-hook-form";
import { HttpError } from "@refinedev/core";

// Sub-component using useFormContext
const NameField = () => {
  const { register, formState: { errors } } = useFormContext();
  return (
    <div>
      <label>Name</label>
      <input {...register("name", { required: "Name is required" })} />
      {errors.name && <span>{errors.name.message}</span>}
    </div>
  );
};

export const ProductCreate = () => {
  const methods = useForm<{ name: string }, HttpError>({ defaultValues: { name: "" } });

  const onSubmit = methods.handleSubmit((data) => {
    // handle submission
  });
return (
    <FormProvider {...methods}>
      <form onSubmit={onSubmit}>
        <NameField />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
};

import { useForm, FormProvider, useFormContext } from "@refinedev/react-hook-form";
import { HttpError } from "@refinedev/core";

// Sub-component using useFormContext
const NameField = () => {
  const { register, formState: { errors } } = useFormContext();
  return (
    <div>
      <label>Name</label>
      <input {...register("name", { required: "Name is required" })} />
      {errors.name && <span>{errors.name.message}</span>}
    </div>
  );
};

export const ProductCreate = () => {
  const methods = useForm<{ name: string }, HttpError>({ defaultValues: { name: "" } });

  const onSubmit = methods.handleSubmit((data) => {
    // handle submission
  });
return (
    <FormProvider {...methods}>
      <form onSubmit={onSubmit}>
        <NameField />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
};

This pattern is fully supported because Refine’s adapter is compatible with all React Hook Form features, including context sharing and composability Refine React Hook Form integration. If you need more detailed examples, you can refer to the React Hook Form documentation and use them directly in your Refine project, as confirmed by the Refine docs.

Simply, you can use any of the React Hook Form examples as-is by copying and pasting them into your project.
— Refine React Hook Form integration

If you need a more specific example or run into issues, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@207945811592478720> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

useForm create subcomponent using typescript

Did you find this page helpful?