Skip to main content
Refine AI
RefineDocumentation
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​

View Source Code
Run on your local
npm create refine-app@latest -- --example form-antd-use-drawer-form
Previous
useSelect
Next
useForm