# rc-drawer > drawer component for react Latest version **7.3.0** (published 2025-05-30) · MIT license · 0 weekly downloads ## Install ```sh npm install rc-drawer pnpm add rc-drawer yarn add rc-drawer bun add rc-drawer ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 7.3.0 | | Published | 2025-05-30 | | First published | 2016-04-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 5 | | Unpacked size | 58.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 424 | | Author | 155259966@qq.com | | Maintainers | afc163, warmhug, jljsj33, zombiej, madccc | | Keywords | react, react-component, react-drawer, drawer, drawer-menu, rc-drawer-menu, react-drawer-menu, animation, drawer-motion, drawer-animation | ## Links - npm: https://www.npmjs.com/package/rc-drawer - Repository: https://github.com/react-component/drawer - Issues: https://github.com/react-component/drawer/issues - npm.io page: https://npm.io/package/rc-drawer ## Dependencies (5) - [rc-util](https://npm.io/package/rc-util.md) ^5.38.1 - [rc-motion](https://npm.io/package/rc-motion.md) ^2.6.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.23.9 - [@rc-component/portal](https://npm.io/package/@rc-component/portal.md) ^1.1.1 ## Alternatives - [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads - [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads - [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads - [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads - [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads ## Recent versions - 7.3.0 (latest) — 2025-05-30 - 2.0.0-beta.3 (beta) — 2019-07-11 - 8.0.0 — 2025-01-08 - 7.2.0 — 2024-05-30 - 7.1.0 — 2024-02-07 - 7.0.0 — 2024-01-04 - 6.5.2 — 2023-09-22 - 6.5.1 — 2023-09-22 - 6.5.0 — 2023-09-18 - 6.4.1 — 2023-08-08 - 6.4.0 — 2023-08-08 - 6.3.0 — 2023-06-20 - 6.2.0 — 2023-05-30 - 6.1.6 — 2023-05-27 - 6.1.5 — 2023-03-24 - … 121 more at https://npm.io/package/rc-drawer/versions ## README # rc-drawer [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![node version][node-image]][node-url] [![npm download][download-image]][download-url] [npm-image]: http://img.shields.io/npm/v/rc-drawer.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-drawer [github-actions-image]: https://github.com/react-component/drawer/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/drawer/actions [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square [node-url]: http://nodejs.org/download/ [download-image]: https://img.shields.io/npm/dm/rc-drawer.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-drawer ## Example https://drawer-react-component.vercel.app/ ## Usage ```js import Drawer from 'rc-drawer'; import React from 'react'; import ReactDom from 'react-dom'; ReactDom.render( {menu children} , mountNode); ``` ## Install [![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer) ## Browser Support | ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ | ## API | props | type | default | description | | ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- | | className | string | null | - | | classNames | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area | | styles | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area | | prefixCls | string | 'drawer' | prefix class | | width | string \| number | null | drawer content wrapper width, drawer level transition width | | height | string \| number | null | drawer content wrapper height, drawer level transition height | | open | boolean | false | open or close menu | | defaultOpen | boolean | false | default open menu | | placement | string | `left` | `left` `top` `right` `bottom` | | level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array | | levelMove | number \| array \| func | null | level move value. default is drawer width | | duration | string | `.3s` | level animation duration | | ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function | | getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement | | showMask | boolean | true | mask is show | | maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | | maskStyle | CSSProperties | null | mask style | | afterVisibleChange | func | null | transition end callback(open) | | onClose | func | null | close click function | | keyboard | boolean | true | Whether support press esc to close | | autoFocus | boolean | true | Whether focusing on the drawer after it opened | | onMouseEnter | React.MouseEventHandler\ | - | Trigger when mouse enter drawer panel | | onMouseOver | React.MouseEventHandler\ | - | Trigger when mouse over drawer panel | | onMouseLeave | React.MouseEventHandler\ | - | Trigger when mouse leave drawer panel | | onClick | React.MouseEventHandler\ | - | Trigger when mouse click drawer panel | | onKeyDown | React.MouseEventHandler\ | - | Trigger when mouse keydown on drawer panel | | onKeyUp | React.MouseEventHandler\ | - | Trigger when mouse keyup on drawer panel | > 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`. ## Development ``` npm install npm start ``` --- _Source: https://npm.io/package/rc-drawer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._