{"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.","language":"javascript","status":"renamed","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-drawer"],"cli":null},"imports":["import Drawer from 'rc-drawer';","import type { DrawerProps } from 'rc-drawer';","import Drawer from '@rc-component/drawer';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}