Skip to main content
Version: 4.xx.xx

React Hook Form
Check the guide
Please check the guide for more information on this topic.
Router Integrated
This value can be inferred from the route. Click to see the guide for more information.

Refine provides an integration package for React Hook Form library. This package enables you to manage your forms in a headless manner. This adapter supports all of the features of both React Hook Form and Refine's useForm hook. Simply, you can use any of the React Hook Form examples as-is by copying and pasting them into your project.

This package exports following hooks to manage your forms:

Installation

Install the @refinedev/react-hook-form library.

npm i @refinedev/react-hook-form

Usage

Let's see how to edit a post with useForm hook.

edit.tsx
import { HttpError } from "@refinedev/core";
import { useForm } from "@refinedev/react-hook-form";

export const PostEdit = () => {
const {
refineCore: { onFinish, formLoading, queryResult },
register,
handleSubmit,
formState: { errors },
} = useForm<IPost, HttpError>({
refineCoreProps: {
resource: "posts",
action: "edit",
id: 1,
}
});

return (
<form onSubmit={handleSubmit(onFinish)}>
<label>Title: </label>
<input {...register("title", { required: true })} />
{errors.title && <span>This field is required</span>}
<br />

<label>Status: </label>
<select {...register("status")}>
<option value="published">published</option>
<option value="draft">draft</option>
<option value="rejected">rejected</option>
</select>
<br />

<label>Content: </label>
<textarea
{...register("content", { required: true })}
rows={10}
cols={50}
/>
{errors.content && <span>This field is required</span>}
<br />

<input type="submit" value="Submit" />
{formLoading && <p>Loading</p>}
</form>
);
};

export type IStatus = "published" | "draft" | "rejected";

interface IPost {
id: number;
title: string;
content: string;
status: IStatus;
}