RC Drawer Component for React

Common errors

• Module not found: Can't resolve 'rc-drawer'

  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.
  fix Install 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; ... }'

  cause Using the old prop name `destroyOnClose` with `@rc-component/drawer` versions 1.1.0 or newer, where the prop was renamed.
  fix Update the prop name from `destroyOnClose` to `destroyOnHidden`.

• Property 'afterVisibleChange' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; open?: boolean; ... }'

  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.
  fix Update the prop name from `afterVisibleChange` to `afterOpenChange`.

Warnings

• breaking 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.
  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.
• breaking 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.
  Fix: Replace `destroyOnClose={true}` with `destroyOnHidden={true}`.
• breaking 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.
  Fix: Replace `afterVisibleChange={myHandler}` with `afterOpenChange={myHandler}`.
• gotcha 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.
  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.

Install

• npm install rc-drawer npm
• yarn add rc-drawer yarn
• pnpm add rc-drawer pnpm

Imports

• Drawer
  wrong:

  const Drawer = require('rc-drawer');

  correct:

  import Drawer from 'rc-drawer';

  While CommonJS `require` works in Node.js, modern React development largely uses ESM `import`. This package ships TypeScript types.
• DrawerProps
  wrong:

  import { DrawerProps } from 'rc-drawer';

  correct:

  import type { 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.

Quickstart

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;
}
*/