Drawer API

API reference for the Drawer component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: Drawer

Import

import { Drawer } from '@soroush.tech/design-system/Drawer'

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	-	If true, the drawer is shown.
`children`	`ReactNode`	-	The drawer content.
`onClose`	`(event, reason: 'escapeKey' \| 'backdropClick') => void`	-	Fired on Escape (top modal only) or backdrop click.
`anchor`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'left'`	Edge the drawer slides in from.
`elevation`	`0-24`	`16`	Shadow depth of the panel, forwarded to `Paper`.
`transitionDuration`	`number`	`225`	Slide duration in milliseconds.

Also accepts every other Modal pass-through control - e.g. hasBackdrop, shouldKeepMounted, shouldUsePortal, portalContainer, shouldLockScroll, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus - via ...modalProps.

left / right anchors fill the viewport height; top / bottom fill the width. The panel's cross-axis size is driven by its content.

Example

const [isOpen, setIsOpen] = useState(false)

<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} anchor="right">
  <Navbar items={NAV_ITEMS} direction="vertical" gap={3} />
</Drawer>

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.