Skip to main content
RefineDocumentation
Version: 4.xx.xx

useDrawer

The useDrawer hook helps you manage the Ant Design Drawer component.

const { show, close, drawerProps } = useDrawer();

You can use the show and close props to control the drawer visibility. You have to descturt drawerProps to the <Drawer/> component.

Usage​

Let's see an example:

src/pages/posts/list.tsx
import { useDrawer } from "@refinedev/antd";
import { Drawer, Button } from "antd";

export const PostList: React.FC = () => {
  const { show, drawerProps } = useDrawer();

  return (
    <>
      <Button onClick={show}>Show Drawer</Button>
      <Drawer {...drawerProps}>
        <p>Drawer Content</p>
      </Drawer>
    </>
  );
};

Here, we show a button somewhere on the page and use show on it's onClick callback to trigger opening of the <Drawer>. When the user clicks on the button, the <Drawer> appears.

API Reference​

Properties​

Return Value​

KeyDescriptionType
showReturns the visibility state of the Drawer() => void
closeA function that can open the drawer() => void
drawerPropsSpecify a function that can close the drawer() => void