# Component/Drawer
> Props: component-drawer.props.txt
## Examples
### Base
```tsx
{
render: args => {
const [open, setOpen] = useState(false);
return <>
setOpen(false)}>
Drawer Content
{args?.width && `width: ${args.width}`}
setOpen(false)} />
;
}
}
```
### Direction
```tsx
{
render: (args) => {
const directions: DrawerDirection[] = ['left', 'right'];
const [open, setOpen] = useState({
left: false,
right: false,
});
return (
{directions.map((direction) => {
return (
<>
setOpen((prevOpen) => ({ ...prevOpen, [direction]: false }))}
direction={direction}
>
Drawer Content
setOpen((prevOpen) => ({ ...prevOpen, [direction]: false }))}
/>
);
})}
);
},
args: {}
}
```
### Drawer With Modal
```tsx
{
render: (args: DrawerProps) => {
const [show, setShow] = useState(false);
const [show_modal, setShowModal] = useState(false);
const onHandleConfirm = () => {
Confirm({
zIndex: getZIndex('toast'),
title: 'confirm'
});
};
return <>
setShow(false)} zIndex={getZIndex('modal')} {...args}>
Body Content
setShowModal(false)} cancelText='닫기' fullScreen>
;
}
}
```
### Drawer With Modal No Use Portal
```tsx
{
render: (args: DrawerProps) => {
const [show, setShow] = useState(false);
const [show_modal, setShowModal] = useState(false);
const onHandleConfirm = () => {
Confirm({
zIndex: getZIndex('toast'),
title: 'confirm'
});
};
return <>
setShow(false)} zIndex={getZIndex('modal')} {...args}>
Body Content
setShowModal(false)} cancelText='닫기' fullScreen>
;
},
args: {
noUsePortal: true
}
}
```
### Drawer With Navigation
Drawer 내부에 원하는 요소를 조합할 수 있습니다.
```tsx
{
parameters: {
layout: 'fullscreen',
docs: {
description: {
story: 'Drawer 내부에 원하는 요소를 조합할 수 있습니다.'
}
}
},
render: () => {
const [open, setOpen] = useState(false);
const [currentMenu, setCurrentMenu] = useState();
const handleMenuChange = (id?: string) => {
setCurrentMenu(id);
handelClose();
};
const handelClose = () => {
setOpen(false);
};
return <>
setOpen(true)}>
지그재그
zigzag.co.kr
}>파트너라운지
;
}
}
```
### No Use Animation On Close
```tsx
{
render: args => {
const [open, setOpen] = useState(false);
return <>
setOpen(false)}>
Drawer Content
{args?.width && `width: ${args.width}`}
setOpen(false)} />
;
},
args: {
animationOnClose: false
}
}
```
### No Use Portal
```tsx
{
render: (args) => {
const [open, setOpen] = useState(false);
return (
setOpen(false)}>
Drawer Content
setOpen(false)} />
);
},
args: {
noUsePortal: true
}
}
```
### Width
```tsx
{
render: args => {
const [open, setOpen] = useState(false);
return <>
setOpen(false)}>
Drawer Content
{args?.width && `width: ${args.width}`}
setOpen(false)} />
;
},
args: {
width: '50%'
}
}
```