{"id":11630,"library":"rc-drawer","title":"RC Drawer Component for React","description":"rc-drawer is a foundational, highly customizable drawer component for React applications, providing animated side panels typically used for navigation menus or ancillary content. Historically, it was a popular choice within the react-component ecosystem for creating fluid, accessible drawer interfaces. The package, currently stable at version 7.3.0, primarily offered imperative and declarative APIs for controlling visibility, position, and animation. However, rc-drawer has been superseded and effectively deprecated. Active development and new features are now exclusively happening under the renamed package, `@rc-component/drawer`, which started its versioning from 1.0.0 and is actively maintained with a regular release cadence. Developers are strongly advised to migrate to `@rc-component/drawer` for ongoing support, bug fixes, and new functionalities like resizable drawers.","status":"renamed","version":"7.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/react-component/drawer","tags":["javascript","react","react-component","react-drawer","drawer","drawer-menu","rc-drawer-menu","react-drawer-menu","animation","typescript"],"install":[{"cmd":"npm install rc-drawer","lang":"bash","label":"npm"},{"cmd":"yarn add rc-drawer","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-drawer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"While CommonJS `require` works in Node.js, modern React development largely uses ESM `import`. This package ships TypeScript types.","wrong":"const Drawer = require('rc-drawer');","symbol":"Drawer","correct":"import Drawer from 'rc-drawer';"},{"note":"Import types using `import type` for clarity and better tree-shaking in TypeScript.","wrong":"import { DrawerProps } from 'rc-drawer';","symbol":"DrawerProps","correct":"import type { DrawerProps } from 'rc-drawer';"},{"note":"The `rc-drawer` package has been renamed to `@rc-component/drawer`. For new projects or migrations, use the new package name for active development and features. Ensure `@rc-component/drawer` is installed.","symbol":"Drawer (migration)","correct":"import Drawer from '@rc-component/drawer';"}],"quickstart":{"code":"import Drawer from 'rc-drawer';\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css'; // Assume basic styling for visibility\n\nconst App = () => {\n  const [open, setOpen] = useState(false);\n\n  const toggleDrawer = () => {\n    setOpen(!open);\n  };\n\n  return (\n    <div>\n      <button onClick={toggleDrawer}>Open Drawer</button>\n      <Drawer\n        open={open}\n        onClose={toggleDrawer}\n        placement=\"right\"\n        width={300}\n        handler={false} // Disable default handler\n        maskClosable={true}\n      >\n        <div style={{ padding: '20px' }}>\n          <h2>Drawer Content</h2>\n          <p>This is the content inside the drawer.</p>\n          <button onClick={toggleDrawer}>Close Drawer</button>\n        </div>\n      </Drawer>\n    </div>\n  );\n};\n\n// Mount the app to a DOM element, e.g., <div id=\"root\"></div>\nReactDOM.render(<App />, document.getElementById('root'));\n\n/* Example index.css to make drawer visible: */\n/*\nbody {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n}\n*/","lang":"typescript","description":"Demonstrates how to import and use the `Drawer` component with basic open/close functionality, including state management and common props. Note that `rc-drawer` is superseded by `@rc-component/drawer`."},"warnings":[{"fix":"Migrate your dependencies from `rc-drawer` to `@rc-component/drawer` using `npm install @rc-component/drawer` or `yarn add @rc-component/drawer`, and update your import statements accordingly.","message":"The `rc-drawer` package has been effectively deprecated and renamed to `@rc-component/drawer`. All future development, bug fixes, and new features will only be released under the `@rc-component/drawer` package. While `rc-drawer` version 7.3.0 is stable, it will not receive further updates. Migration to `@rc-component/drawer` is strongly recommended for ongoing support.","severity":"breaking","affected_versions":"<=7.3.0"},{"fix":"Replace `destroyOnClose={true}` with `destroyOnHidden={true}`.","message":"The prop `destroyOnClose` was renamed to `destroyOnHidden` in `@rc-component/drawer@1.1.0`. If you are migrating from an older `rc-drawer` version, ensure you update this prop name.","severity":"breaking","affected_versions":">=1.1.0 (of @rc-component/drawer)"},{"fix":"Replace `afterVisibleChange={myHandler}` with `afterOpenChange={myHandler}`.","message":"The prop `afterVisibleChange` was renamed to `afterOpenChange` in `rc-drawer` v8.0.0 (which corresponds to `@rc-component/drawer@1.0.0`). Projects migrating from `rc-drawer` v7.x or earlier should update this prop.","severity":"breaking","affected_versions":">=8.0.0 (of rc-drawer) or >=1.0.0 (of @rc-component/drawer)"},{"fix":"Review and update your CSS selectors or JavaScript DOM queries to target the new `section` element if you are using specific child selectors for the drawer content.","message":"The internal DOM structure for the drawer content was updated from `content` to `section` in `rc-drawer` v8.0.0 (and `@rc-component/drawer@1.0.0`). If your CSS or JavaScript relies on specific DOM selectors for styling or manipulating the drawer content, these selectors might break.","severity":"gotcha","affected_versions":">=8.0.0 (of rc-drawer) or >=1.0.0 (of @rc-component/drawer)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the correct package: `npm install rc-drawer` for legacy projects, or `npm install @rc-component/drawer` and update imports for modern projects.","cause":"The package `rc-drawer` is not installed or the project has been partially migrated to `@rc-component/drawer` but still uses the old import path.","error":"Module not found: Can't resolve 'rc-drawer'"},{"fix":"Update the prop name from `destroyOnClose` to `destroyOnHidden`.","cause":"Using the old prop name `destroyOnClose` with `@rc-component/drawer` versions 1.1.0 or newer, where the prop was renamed.","error":"Property 'destroyOnClose' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; open?: boolean; ... }'"},{"fix":"Update the prop name from `afterVisibleChange` to `afterOpenChange`.","cause":"Using the old prop name `afterVisibleChange` with `rc-drawer` v8.0.0 or `@rc-component/drawer` v1.0.0 and newer, where the prop was renamed.","error":"Property 'afterVisibleChange' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; open?: boolean; ... }'"}],"ecosystem":"npm"}