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.

import { useDrawerForm } from "@pankod/refine-antd";

const { drawerProps, formProps } = useDrawerForm<IPost>({
action: "create", // or "edit"
});

All we have to do is to pass the drawerProps to <Drawer> and formProps to <Form> components.

Usage

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

Create Drawer

pages/posts/list.tsx
import { useDrawerForm, Drawer, Form, Create, Radio, List, Input } from "@pankod/refine-antd";

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

return (
<>
<List
createButtonProps={{
onClick: () => {
show();
},
}}
>
...
</List>
<Drawer {...drawerProps}>
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item label="Title" name="title">
<Input />
</Form.Item>
<Form.Item label="Status" name="status">
<Radio.Group>
<Radio value="draft">Draft</Radio>
<Radio value="published">Published</Radio>
<Radio value="rejected">Rejected</Radio>
</Radio.Group>
</Form.Item>
</Form>
</Create>
</Drawer>
</>
)
}

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

createButtonProps allows us to create and manage a button above the table.

    createButtonProps={{
onClick: () => {
show();
},
}}

This code block makes <Drawer> appear when you click the button.

saveButtonProps allows us to manage the save button in the drawer.

Create record action

Edit Drawer

Let's learn how to add editing capabilities to the records that will be opening form in Drawer with using action prop.

pages/posts/list.tsx
import {
useDrawerForm,
Drawer,
Form,
Create,
Radio,
List,
Edit,
Table,
EditButton,
Input
} from "@pankod/refine-antd";

export const PostList: React.FC = () => {
const {
drawerProps,
formProps,
show,
saveButtonProps,
deleteButtonProps,
id,
} = useDrawerForm<IPost>({
action: "edit",
});

return (
<>
<List>
<Table>
...
<Table.Column<IPost>
title="Actions"
dataIndex="actions"
key="actions"
render={(_value, record) => (
<EditButton
size="small"
recordItemId={record.id}
onClick={() => show(record.id)}
/>
)}
/>
</Table>
</List>
<Drawer {...drawerProps}>
<Edit
saveButtonProps={saveButtonProps}
deleteButtonProps={deleteButtonProps}
recordItemId={id}
>
<Form {...formProps} layout="vertical">
<Form.Item label="Title" name="title">
<Input />
</Form.Item>
<Form.Item label="Status" name="status">
<Radio.Group>
<Radio value="draft">Draft</Radio>
<Radio value="published">Published</Radio>
<Radio value="rejected">Rejected</Radio>
</Radio.Group>
</Form.Item>
</Form>
</Edit>
</Drawer>
</>
)
}

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

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

So, we have to put the edit buttons 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
size="small"
recordItemId={record.id}
onClick={() => show(record.id)}
/>
)}
/>

The saveButtonProps and deleteButtonProps gives us the ability of saving and deleting buttons in the drawer.

Edit record action

API Parameters

Properties

KeyDescriptionTypeDefault
action
Required
Type of form mode"edit" | "create"| "clone""create"
idRecord id for fetchingBaseKeyId that it reads from the URL
autoSubmitCloseClose drawer after submitboolean
formAnt Design form instanceFormInstance<TVariables>
mutationModeDetermines when mutations are executed. If not explicitly configured, it is read from the mutation mode config of the resource in current route"pessimistic" | "optimistic" | "undoable"
onMutationErrorCalled when mutation encounters an error(error: TError, variables: TVariables, context: any) => void
onMutationSuccessCalled when mutation is successful(data: TData, variables: TVariables, context: any) => void
redirectPage to redirect after succesfull mutation "show | "edit | "list" | false"list"
submitSubmits the form(values?: TVariables) => Promise<TData>
submitOnEnterListens Enter key press to submit formbooleanfalse
undoableTimeoutDuration to wait before executing mutations when mutationMode = "undoable"number5000*
warnWhenUnsavedChangesShows notification when unsaved changes existbooleanfalse*
successNotificationSuccessful Mutation notificationSuccessErrorNotification"Successfully created resource" or "Successfully updated resource"
errorNotificationUnsuccessful Mutation notificationSuccessErrorNotification"There was an error creating resource (status code: statusCode)" or "Error when updating resource (status code: statusCode)"
metaDataMetadata query for dataProviderMetaDataQuery{}
liveModeWhether to update data automatically ("auto") or not ("manual") if a related live event is received. The "off" value is used to avoid creating a subscription."auto" | "manual" | "off""off"
liveParamsParams to pass to liveProvider's subscribe method if liveMode is enabled.{ ids?: BaseKey[]; [key: string]: any; }undefined
onLiveEventCallback to handle all related live events of this hook.(event: LiveEvent) => voidundefined
invalidatesYou can use it to manage the invalidations that will occur at the end of the mutation.all, resourceAll, list, many, detail, false["list", "many", "detail"]
onSetValueYou can use it to manipulate data just before initalValue's are given to the <Form> component while in edit mode.(values: TData) => any;
queryOptionsreact-query queryOptions of useOne hook used while in edit mode. UseQueryOptions<
{ data: TData[]; },
TError>

*: 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
formPropsAnt Design form propsFormProps
drawerPropsProps for managed drawerDrawerProps
saveButtonPropsProps for a submit button{ disabled: boolean; onClick: () => void; loading: boolean; }
deleteButtonPropsAdds props for delete buttonDeleteButtonProps
formLoadingLoading status of formboolean
submitSubmit method, the parameter is the value of the form fields() => void
visibleWhether the drawer is visible or notboolean
closeSpecify a function that can close the drawer() => void
defaultFormValuesLoadingDefaultFormValues loading status of formboolean
formAnt Design form instanceFormInstance<TVariables>
idRecord id for edit actionstring
setIdid setterDispatch<SetStateAction< string | undefined>>
queryResultResult of the query of a recordQueryObserverResult<{ data: TData }>
mutationResultResult of the mutation triggered by submitting the formUseMutationResult<
{ data: TData },
TError,
{ resource: string; values: TVariables; },
unknown>

Type Parameters

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

Live Codesandbox Example