Drawer
A panel anchored to an edge of the screen, dragged between snap points and dismissed by swiping it towards that edge.
Installation
npm i @huin-core/react-drawerAPI Reference
Drawer
| Prop | Type | Description |
|---|---|---|
| side | "bottom" | "top" | "left" | "right" | The edge the drawer is anchored to. This is also the direction you swipe towards in order to close it. |
| snapPoints | "none" | "0.4,0.7,1" | "0.25,1" | The points the component can rest at, as fractions of the container from least to most visible. Dragging settles on the nearest one instead of only opening or closing. |
| defaultOpen | boolean | Determines whether the component should be open by default when it is initially rendered. |
| open | boolean | Controls the open state of the component. When set to true, the component is displayed; when false, it is hidden. |
| modal | boolean | The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers. |
| dismissible | boolean | When false, the component cannot be closed by swiping, pressing escape or interacting outside of it. |
| handleOnly | boolean | When true, only the handle initiates a drag, so the rest of the content stays free for other pointer interactions. |
| closeThreshold | number | Fraction (0–1) of the component's own extent a drag must exceed to close it. |
| velocityThreshold | number | Speed in px/ms which, when exceeded on release, closes the component regardless of how far it was dragged. |
| scrollLockTimeout | number | How long, in milliseconds, a drag stays blocked after scrolling inside the component. |
| nestedDisplacement | number | How far the component steps back, in pixels, for each one stacked on top of it — the strip of it that stays visible behind the one in front. Inherited by nested roots, so setting it on the outermost one covers the whole stack. |
| snapToSequentialPoint | boolean | A high velocity normally skips intermediate snap points. Set this when every point matters equally. |
| shouldScaleBackground | boolean | Scales the [data-huin-core-drawer-wrapper] element down while the drawer is open, the way an iOS sheet shrinks the page behind it. |
| setBackgroundColorOnScale | boolean | When false, the body keeps its own background colour while the page behind the drawer is scaled down. |
| noBodyStyles | boolean | When true, nothing is written to the body's styles. |
| fixed | boolean | When true, an open keyboard only shortens the drawer instead of moving it up, so its content stays fully scrollable. |
| repositionInputs | boolean | When true, inputs are repositioned above the keyboard rather than being scrolled into view by the browser. |
| preventScrollRestoration | boolean | Keeps the page's scroll position from being restored after a navigation that happened while the drawer was open. |
| autoFocus | boolean | When true, focus moves into the component on open. Left off, opening doesn't summon the keyboard on touch devices. |
| disableDefaultStyles | boolean | Skips the stylesheet the package injects. You then own every animation, including the closed state exit animation, which must resolve to a different animation-name than the open state or the component will unmount without animating. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
| onDrag | function | Event handler called on every pointer move while dragging, with the fraction of the component's extent dragged so far. |
| onRelease | function | Event handler called when the drag ends. The second argument is whether the component will stay open. |
| onClose | function | Event handler called when the component starts closing, before the exit animation has finished. |
| onAnimationEnd | function | Event handler called once the open or close animation has ended. It receives the open state as of that moment. |
DrawerTrigger
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerPortal
| Prop | Type | Description |
|---|---|---|
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
DrawerOverlay
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
DrawerContent
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| forceMount | boolean | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from. |
| onOpenAutoFocus | function | Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault. |
| onCloseAutoFocus | function | Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault. |
| onEscapeKeyDown | function | Event handler called when the escape key is down. It can be prevented by calling event.preventDefault. |
| onPointerDownOutside | function | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault |
| onInteractOutside | function | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling event.preventDefault. |
DrawerHandle
| Prop | Type | Description |
|---|---|---|
| preventCycle | boolean | When true, tapping the handle does not move to the next snap point. |
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerHeader
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerTitle
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerDescription
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerFooter
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerClose
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
DrawerNestedRoot
| Prop | Type | Description |
|---|---|---|
| dismissible | boolean | When false, the component cannot be closed by swiping, pressing escape or interacting outside of it. |
| handleOnly | boolean | When true, only the handle initiates a drag, so the rest of the content stays free for other pointer interactions. |
| nestedDisplacement | number | How far the component steps back, in pixels, for each one stacked on top of it — the strip of it that stays visible behind the one in front. Inherited by nested roots, so setting it on the outermost one covers the whole stack. |
| onOpenChange | function | Event handler called when the open state of the component changes. |
Keyboard Interactions
| Key | Description |
|---|---|
Space Enter | Opens the drawer from its trigger. |
Tab | Moves focus to the next element, trapped inside the drawer. |
Esc | Closes the drawer and returns focus to the trigger. |