useDrawerForm

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

info

useDrawerForm hook is extended from useForm from the @refinedev/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.

create

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

http://localhost:3000/posts

import React, { useState } from "react";
import { useShow, HttpError } from "@refinedev/core";

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

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

const PostList: React.FC = () => {
    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>
        </>
    );
};

edit

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

http://localhost:3000/posts

import React, { useState } from "react";
import { useShow, HttpError } from "@refinedev/core";

import {
    List,
    Edit,
    EditButton,
    useTable,
    useDrawerForm,
} from "@refinedev/antd";
import { Table, Form, Select, Input, Drawer, Space } from "antd";

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

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

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

    return (
        <>
            <List
                canCreate
                createButtonProps={{
                    onClick: () => {
                        show();
                    },
                }}
            >
                <Table {...tableProps} rowKey="id">
                    <Table.Column dataIndex="id" title="ID" />
                    <Table.Column dataIndex="title" title="Title" />
                    <Table.Column<IPost>
                        title="Actions"
                        dataIndex="actions"
                        key="actions"
                        render={(_, record) => (
                            <Space>
                                <EditButton
                                    hideText
                                    size="small"
                                    recordItemId={record.id}
                                    onClick={() => show(record.id)}
                                />
                            </Space>
                        )}
                    />
                </Table>
            </List>
            <Drawer {...drawerProps}>
                <Edit saveButtonProps={saveButtonProps} recordItemId={id}>
                    <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>
                </Edit>
            </Drawer>
        </>
    );
};

caution

refine doesn't automatically add a <EditButton/> to the each record in <PostList> which opens edit form in <Drawer> when clicked.

So, we have to put the <EditButton/> on our list. In that way, <Edit> form in <Drawer> can fetch data by the record id.

<Table.Column<IPost>
    title="Actions"
    dataIndex="actions"
    key="actions"
    render={(_value, record) => <EditButton onClick={() => show(record.id)} />}
/>

caution

Don't forget to pass the record "id" to show to fetch the record data. This is necessary for both "edit" and "clone" forms.

Properties

tip

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

syncWithLocation

Default: false

When true, the drawers visibility state and the id of the record will be synced with the URL.

This property can also be set as an object { key: string; syncId?: boolean } to customize the key of the URL query parameter. id will be synced with the URL only if syncId is true.

const drawerForm = useDrawerForm({
    syncWithLocation: { key: "my-modal", syncId: true },
});

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.

FAQ

How can I change the form data before submitting it to the API?

You may need to modify the form data before it is sent to the API.

For example, Let's send the values we received from the user in two separate inputs, name and surname, to the API as fullName.

pages/user/create.tsx

import React from "react";
import { Drawer, Create, useDrawerForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export const UserCreate: React.FC = () => {
    const { formProps, drawerProps, saveButtonProps } = useDrawerForm({
        action: "create",
    });

    const handleOnFinish = (values) => {
        formProps.onFinish?.({
            fullName: `${values.name} ${values.surname}`,
        });
    };

    return (
        <Drawer {...drawerProps}>
            <Create saveButtonProps={saveButtonProps}>
                <Form {...formProps} onFinish={handleOnFinish} layout="vertical">
                    <Form.Item label="Name" name="name">
                        <Input />
                    </Form.Item>
                    <Form.Item label="Surname" name="surname">
                        <Input />
                    </Form.Item>
                </Form>
            </Create>
        </Drawer>
    );
};

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.

Type Parameters

Property	Desription	Type	Default
TQueryFnData	Result data returned by the query function. Extends BaseRecord	BaseRecord	BaseRecord
TError	Custom error object that extends HttpError	HttpError	HttpError
TVariables	Values for params.	{}
TData	Result data returned by the select function. Extends BaseRecord. If not specified, the value of TQueryFnData will be used as the default value.	BaseRecord	TQueryFnData
TResponse	Result data returned by the mutation function. Extends BaseRecord. If not specified, the value of TData will be used as the default value.	BaseRecord	TData
TResponseError	Custom error object that extends HttpError. If not specified, the value of TError will be used as the default value.	HttpError	TError

Return Value

Key	Description	Type
show	A function that opens the drawer	(id?: BaseKey) => void
form	Ant Design form instance	FormInstance<TVariables>
formProps	Ant Design form props	FormProps
drawerProps	Props for managed drawer	DrawerProps
saveButtonProps	Props for a submit button	{ disabled: boolean; onClick: () => void; loading: boolean; }
deleteButtonProps	Adds props for delete button	DeleteButtonProps
submit	Submit method, the parameter is the value of the form fields	() => void
open	Whether the drawer is open or not	boolean
close	Specify a function that can close the drawer	() => void

Example

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

npm create refine-app@latest -- --example form-antd-use-drawer-form