Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Drawer
✓ import Drawer from 'rc-drawer';
✗ const Drawer = require('rc-drawer');
While CommonJS `require` works in Node.js, modern React development largely uses ESM `import`. This package ships TypeScript types.
DrawerProps
✓ import type { DrawerProps } from 'rc-drawer';
✗ import { DrawerProps } from 'rc-drawer';
Import types using `import type` for clarity and better tree-shaking in TypeScript.
Drawer (migration)
✓ import Drawer from '@rc-component/drawer';
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.
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`.
import Drawer from 'rc-drawer';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Assume basic styling for visibility
const App = () => {
const [open, setOpen] = useState(false);
const toggleDrawer = () => {
setOpen(!open);
};
return (
<div>
<button onClick={toggleDrawer}>Open Drawer</button>
<Drawer
open={open}
onClose={toggleDrawer}
placement="right"
width={300}
handler={false} // Disable default handler
maskClosable={true}
>
<div style={{ padding: '20px' }}>
<h2>Drawer Content</h2>
<p>This is the content inside the drawer.</p>
<button onClick={toggleDrawer}>Close Drawer</button>
</div>
</Drawer>
</div>
);
};
// Mount the app to a DOM element, e.g., <div id="root"></div>
ReactDOM.render(<App />, document.getElementById('root'));
/* Example index.css to make drawer visible: */
/*
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
}
*/
Debug
Known issues
breakingThe `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.fixMigrate 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.
affects: <=7.3.0
breakingThe 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.fixReplace `destroyOnClose={true}` with `destroyOnHidden={true}`. affects: >=1.1.0 (of @rc-component/drawer)
breakingThe 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.fixReplace `afterVisibleChange={myHandler}` with `afterOpenChange={myHandler}`. affects: >=8.0.0 (of rc-drawer) or >=1.0.0 (of @rc-component/drawer)
gotchaThe 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.fixReview 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.
affects: >=8.0.0 (of rc-drawer) or >=1.0.0 (of @rc-component/drawer)
Errors
Common errors & fixes
Module not found: Can't resolve 'rc-drawer'
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.
fixInstall the correct package: `npm install rc-drawer` for legacy projects, or `npm install @rc-component/drawer` and update imports for modern projects.
Property 'destroyOnClose' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; open?: boolean; ... }'
Using the old prop name `destroyOnClose` with `@rc-component/drawer` versions 1.1.0 or newer, where the prop was renamed.
fixUpdate the prop name from `destroyOnClose` to `destroyOnHidden`.
Property 'afterVisibleChange' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; open?: boolean; ... }'
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.
fixUpdate the prop name from `afterVisibleChange` to `afterOpenChange`.
Audit
Dependencies
reactrequiredPeer dependency for React applications.
react-domrequiredPeer dependency for rendering React components to the DOM.