Skip to main content
Version: 3.xx.xx

useDrawerForm

useDrawerForm hook allows you to manage a form within a Drawer. It returns Ant Design <Form> and <Drawer> components props.

INFORMATION

useDrawerForm hook is extended from useForm from the @pankod/refine-antd package. This means that you can use all the features of useForm hook.

Basic Usage

We'll show two examples, one for creating and one for editing a post. Let's see how useDrawerForm is used in both.

In this example, we will show you how to "create" a record with useDrawerForm.

localhost:3000/posts
Live previews only work with the latest documentation.
import React, { useState } from "react";
import {
useShow,
IResourceComponentsProps,
HttpError,
} from "@pankod/refine-core";

import {
List,
Create,
Table,
Form,
Select,
Input,
Drawer,
useTable,
useDrawerForm,
} from "@pankod/refine-antd";

interface IPost {
id: number;
title: string;
status: "published" | "draft" | "rejected";
}

const PostList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable<IPost, HttpError>();

const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<
IPost,
HttpError,
IPost
>({
action: "create",
});

return (
<>
<List
canCreate
createButtonProps={{
onClick: () => {
show();
},
}}
>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
</Table>
</List>
<Drawer {...drawerProps}>
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Status"
name="status"
rules={[
{
required: true,
},
]}
>
<Select
options={[
{
label: "Published",
value: "published",
},
{
label: "Draft",
value: "draft",
},
{
label: "Rejected",
value: "rejected",
},
]}
/>
</Form.Item>
</Form>
</Create>
</Drawer>
</>
);
};

Properties

TIP

All useForm props also available in useDrawerForm. You can find descriptions on useForm docs.

Return values

show

A function that opens the <Drawer>. It takes an optional id parameter. If id is provided, it will fetch the record data and fill the <Form> with it.

close

A function that closes the <Drawer>. Same as [onClose][#onClose].

saveButtonProps

It contains the props needed by the "submit" button within the <Drawer> (disabled,loading etc.). When saveButtonProps.onClick is called, it triggers form.submit(). You can manually pass these props to your custom button.

deleteButtonProps

It contains the props needed by the "delete" button within the <Drawer> (disabled,loading etc.). When deleteButtonProps.onSuccess is called, it triggers it sets id to undefined and open to false. You can manually pass these props to your custom button.

formProps

It's required to manage <Form> state and actions. Under the hood the formProps came from useForm.

It contains the props to manage the Antd <Form> component such as onValuesChange, initialValues, onFieldsChange, onFinish etc.

drawerProps

It's required to manage <Drawer> state and actions.

width

Default: "500px"

It's the width of the <Drawer>.

onClose

A function that can close the <Drawer>. It's useful when you want to close the <Drawer> manually. When warnWhenUnsavedChanges is true, it will show a confirmation modal before closing the <Drawer>. If you override this function, you have to handle this confirmation modal manually.

open

Default: false

Current visible state of <Drawer>.

forceRender

Default: true

It renders <Drawer> instead of lazy rendering it.

API Parameters

Properties

*: These props have default values in RefineContext and can also be set on <Refine> component. useDrawerForm will use what is passed to <Refine> as default but a local value will override it.

**: If not explicitly configured, default value of redirect depends which action used. If action is create, redirects default value is edit (created resources edit page). Otherwise if action is edit, redirects default value is list.

Return Value

KeyDescriptionType
showA function that opens the drawer(id?: BaseKey) => void
formAnt Design form instanceFormInstance<TVariables>
formPropsAnt Design form propsFormProps
drawerPropsProps for managed drawerDrawerProps
saveButtonPropsProps for a submit button{ disabled: boolean; onClick: () => void; loading: boolean; }
deleteButtonPropsAdds props for delete buttonDeleteButtonProps
submitSubmit method, the parameter is the value of the form fields() => void
openWhether the drawer is open or notboolean
closeSpecify a function that can close the drawer() => void

Type Parameters

PropertyDesriptionDefault
TDataResult data of the query that extends BaseRecordBaseRecord
TErrorCustom error object that extends HttpErrorHttpError
TVariablesValues for params.{}

Example

Run on your local
npm create refine-app@latest -- --example form-antd-use-drawer-form