---
sidebar_position: 39
---

import Paper from "@site/src/components/paper";
import DrawerDefault, {
  DrawerSizes,
  DrawerPlacement,
  DrawerCustomSize,
  DrawerCustomStyle,
  DrawerIcons,
} from "@site/src/components/drawer";

# Drawer

Display overlay area at any side of the screen.

```tsx
import { Drawer } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Drawer** component.

<Paper>
  <DrawerDefault />
</Paper>

```tsx
import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Open Drawer</Button>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
      >
        <div className="py-4 px-5">Default Drawer</div>
      </Drawer>
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can set size of the **Drawer**.

<Paper className="block">
  <DrawerSizes />
</Paper>

```tsx
import { useState } from "react";
import { Drawer, Button, Text } from "rizzui";

export default function App() {
  const [drawerSate, setDrawerState] = useState({
    isOpen: false,
    size: "md",
  });
  return (
    <>
      <div className="flex items-center justify-around gap-2 flex-wrap">
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "sm",
            }))
          }
        >
          sm
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "md",
            }))
          }
        >
          Default
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "lg",
            }))
          }
        >
          lg
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "xl",
            }))
          }
        >
          xl
        </Button>
        <Button
          variant="outline"
          onClick={() =>
            setDrawerState((prevState) => ({
              ...prevState,
              isOpen: true,
              size: "full",
            }))
          }
        >
          full
        </Button>
      </div>
      <Drawer
        isOpen={drawerSate.isOpen}
        size={drawerSate.size}
        onClose={() => setDrawerState((prevState) => ({ ...prevState, isOpen: false }))}
      >
        <div className="py-4 px-5">
          This is{" "}
          <Text as="strong">
            &quot;
            {drawerSate.size}
            &quot;
          </Text>{" "}
          size Drawer
        </div>
      </Drawer>
    </>
  );
}
```

<div className="mb-16" />

## With Placement and Resize Handler

You can set placement of the **Drawer**.

<Paper className="block">
  <DrawerPlacement />
</Paper>

```tsx
import { useState } from "react";
import { Drawer, Button, Text } from "rizzui";

export default function App() {
  const [drawerSate, setDrawerState] = useState({
    isOpen: false,
    placement: "left",
  });
  return (
    <>
      <div className="relative py-5">
        <div className="flex h-72 flex-col items-center justify-between">
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "top",
              }))
            }
          >
            Top Drawer
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "bottom",
              }))
            }
          >
            Bottom Drawer
          </Button>
        </div>
        <div className="absolute top-1/2 flex w-full -translate-y-1/2 transform items-center justify-around">
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "left",
              }))
            }
          >
            Left Drawer
          </Button>
          <Button
            variant="outline"
            onClick={() =>
              setDrawerState((prevState) => ({
                ...prevState,
                isOpen: true,
                placement: "right",
              }))
            }
          >
            Right Drawer
          </Button>
        </div>
      </div>
      <Drawer
        customSize={384}
        enableResizer={true}
        isOpen={drawerSate.isOpen}
        placement={drawerSate.placement}
        onClose={() => setDrawerState((prevState) => ({ ...prevState, isOpen: false }))}
      >
        <div className="py-4 px-5">
          The drawer placement on the{" "}
          <Text as="strong">
            &quot;
            {drawerSate.placement}
            &quot;
          </Text>
        </div>
      </Drawer>
    </>
  );
}
```

<div className="mb-16" />

## With Custom Size

You can set custom size of the **Drawer**.

<Paper>
  <DrawerCustomSize />
</Paper>

```tsx
import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Custom Size Drawer</Button>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
        customSize={600}
        enableResizer={true}
      >
        <div className="py-4 px-5">Custom Size = 600px</div>
      </Drawer>
    </>
  );
}
```

<div className="mb-16" />

## With Custom Style

You can do custom style to **Drawer**.

<Paper>
  <DrawerCustomStyle />
</Paper>

```tsx
import { useState } from "react";
import { Drawer, Button } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <Button onClick={() => setDrawerState(true)}>Custom Style Drawer</Button>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
        overlayClassName="backdrop-blur"
        containerClassName="!max-w-[calc(100%-480px)] !shadow-2xl"
      >
        <div className="py-4 px-5">Custom Style</div>
      </Drawer>
    </>
  );
}
```

<div className="mb-16" />

## With Shopping Cart

You can render any thing you want. Here is an empty shpping cart drawer example.

<Paper>
  <DrawerIcons />
</Paper>

```tsx
import { useState } from "react";
import { XMarkIcon } from "@heroicons/react/20/solid";
import { ShoppingBagIcon } from "@heroicons/react/24/outline";
import { Drawer, Button, Badge, ActionIcon, Text, Empty, EmptyProductBoxIcon } from "rizzui";

export default function App() {
  const [drawerState, setDrawerState] = useState(false);
  return (
    <>
      <div
        role="button"
        tabIndex={0}
        onClick={() => setDrawerState(true)}
        className="relative inline-flex cursor-pointer"
      >
        <ShoppingBagIcon
          className="h-auto w-8"
          strokeWidth={1.2}
        />
        <Badge
          size="sm"
          enableOutlineRing
          className="absolute right-1 top-0.5 -translate-y-1/3 translate-x-1/2"
        >
          0
        </Badge>
      </div>
      <Drawer
        isOpen={drawerState}
        onClose={() => setDrawerState(false)}
      >
        <div className="flex min-h-full flex-col py-4 px-5">
          <header className="flex items-center justify-between">
            <Text as="h4">Shopping Cart</Text>
            <ActionIcon
              size="sm"
              variant="outline"
              onClick={() => setDrawerState(false)}
            >
              <XMarkIcon
                className="h-auto w-5"
                strokeWidth={1.5}
              />
            </ActionIcon>
          </header>
          {/* End of drawer header */}
          <div className="flex flex-grow flex-col items-center justify-center">
            <Empty
              image={<EmptyProductBoxIcon />}
              text="No Product Available"
              textClassName="mt-1 text-gray-500"
            />
          </div>
          {/* End of drawer body */}
          <Button
            size="lg"
            className="sticky bottom-0 z-10"
          >
            Proceed to Checkout
          </Button>
          {/* End of drawer footer */}
        </div>
      </Drawer>
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Drawer Props

Here is the API documentation of the Drawer component.

<div className="overflow-x-auto">

|       Props        |                  Type                  |                                                       Description                                                        |  Default  |
| :----------------: | :------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | :-------: |
|       isOpen       |               `boolean`                |                                            Whether the Drawer is open or not                                             |   \_\_    |
|      onClose       |              `() => void`              |                    Called when drawer is closed (Escape key and click outside, depending on options)                     |   \_\_    |
|        size        |      [DrawerSizes](#drawer-sizes)      |                                      Preset size of drawer is sm, md, lg, xl, full                                       |  `"md"`   |
|     placement      | [DrawerPlacements](#drawer-placements) |       Drawer can be placed on left (default), top, right and bottom. Control drawer position with placement prop:        | `"right"` |
|     customSize     |                `number`                |  Size prop will not work when you are using customSize prop. Here is the example of using this prop -> customSize={500}  |   \_\_    |
|   enableResizer    |               `boolean`                |       **customSize** is required if enableResizer is set to true, It will enable the **resize handler** for drawer       |   \_\_    |
|  resizerClassName  |                `string`                |                                  Set custom style classes for Drawer **resize handler**                                  |   \_\_    |
|  overlayClassName  |                `string`                |                                      Override default CSS style of Drawer's overlay                                      |   \_\_    |
| containerClassName |                `string`                | Set custom style classes for the Drawer container, where you can set custom Drawer size and padding and background color |   \_\_    |
|     className      |                `string`                |                                   Set custom style classes for the Drawer root element                                   |   \_\_    |

</div>

<div className="mb-10" />

### Drawer Sizes

```ts
type DrawerSizes = "sm" | "md" | "lg" | "xl" | "full";
```

<div className="mb-10" />

### Drawer Placements

```ts
type DrawerPlacements = "left" | "right" | "top" | "bottom";
```
