react-component/drawer

README

@rc-component/drawer

_{Part of the Ant Design ecosystem.}

🚪 Accessible React drawer component with portal rendering, masks, nested push behavior, keyboard close handling, focus management, and optional resizable panels.

English | 简体中文

Highlights

Area	Support
Placement	Left, right, top, and bottom drawers
Interaction	Mask click, keyboard close, focus management
Composition	Nested drawers with push behavior
Layout	Fixed drawer size, resizable panels, custom containers
Motion	Configurable open and close transitions

Install

npm install @rc-component/drawer

Usage

import Drawer from '@rc-component/drawer';

export default () => (
  <Drawer open onClose={() => {}}>
    Drawer content
  </Drawer>
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Property	Type	Default	Description
afterOpenChange	`(open: boolean) => void`	-	Called after the open or close animation ends.
autoFocus	boolean	true	Whether to focus the drawer after it opens.
children	ReactNode	-	Drawer content.
className	string	-	Class name for the drawer panel.
classNames	`{ mask?: string; wrapper?: string; section?: string; dragger?: string }`	-	Semantic class names for internal drawer elements.
defaultSize	number \| string	-	Default size for uncontrolled resizable drawer.
destroyOnHidden	boolean	false	Unmount the drawer after it is fully closed.
drawerRender	`(node: ReactNode) => ReactNode`	-	Customize rendered drawer panel content.
focusTrap	boolean	-	Whether to trap focus inside the drawer.
focusTriggerAfterClose	boolean	true	Whether to return focus to the trigger after closing.
forceRender	boolean	false	Render the drawer before it is opened.
getContainer	HTMLElement \| `() => HTMLElement` \| string \| false	`body`	Return the mount node. Set to `false` to render inline.
height	number \| string	-	Deprecated. Use `size` for top or bottom placement.
keyboard	boolean	true	Whether pressing Esc closes the drawer.
mask	boolean	true	Whether to show the mask.
maskClassName	string	-	Class name for the mask.
maskClosable	boolean	true	Whether clicking the mask closes the drawer.
maskMotion	CSSMotionProps	-	Motion config for the mask.
maskStyle	CSSProperties	-	Style for the mask.
maxSize	number	-	Maximum size for a resizable drawer.
motion	CSSMotionProps \| `(placement: Placement) => CSSMotionProps`	-	Motion config for the drawer panel.
onClose	`(event: MouseEvent \| KeyboardEvent) => void`	-	Called when the drawer requests to close.
open	boolean	false	Whether the drawer is open.
panelRef	Ref	-	Ref for the drawer panel.
placement	`left` \| `right` \| `top` \| `bottom`	`right`	Drawer placement.
prefixCls	string	`rc-drawer`	Class name prefix.
push	boolean \| `{ distance?: number \| string }`	-	Push parent drawers when nested.
resizable	boolean \| `{ onResize?: (size: number) => void; onResizeStart?: (size: number) => void; onResizeEnd?: (size: number) => void }`	false	Enable resizing and optional resize callbacks.
rootClassName	string	-	Class name for the root wrapper.
rootStyle	CSSProperties	-	Style for the root wrapper.
size	number \| string	`378` for left/right	Drawer size. Controls width for left/right and height for top/bottom placement.
style	CSSProperties	-	Style for the drawer panel.
styles	`{ mask?: CSSProperties; wrapper?: CSSProperties; section?: CSSProperties; dragger?: CSSProperties }`	-	Semantic styles for internal drawer elements.
width	number \| string	-	Deprecated. Use `size` for left or right placement.
zIndex	number	-	Root wrapper z-index.

Mouse and keyboard event handlers such as onClick, onMouseEnter, onMouseLeave, onKeyDown, and onKeyUp are passed to the drawer panel.

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

Common commands:

npm run lint
npm test
npm run tsc
npm run compile

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/drawer is released under the MIT license.