{"id":11752,"library":"react-modern-drawer","title":"React Modern Drawer","description":"React Modern Drawer is a lightweight and performant component library for creating highly customizable slide-out drawers in React applications. Currently at version 1.4.0, it offers a simple API to integrate responsive drawers for navigation, settings, or auxiliary content. The project maintains an active development pace, with recent updates focused on type improvements and build process fixes. Key differentiators include its small bundle size, excellent performance across various browsers, and ease of use, making it a strong candidate for projects prioritizing efficiency and developer experience without relying on larger UI frameworks. It provides fine-grained control over drawer direction, size, and overlay behavior.","status":"active","version":"1.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/Farzin-Firoozi/react-modern-drawer","tags":["javascript","react","drawer","rc-drawer","easy-drawer","react-drawer","react-modern","touch-drawer","modern-drawer","typescript"],"install":[{"cmd":"npm install react-modern-drawer","lang":"bash","label":"npm"},{"cmd":"yarn add react-modern-drawer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-modern-drawer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the React component to function correctly.","package":"react","optional":false}],"imports":[{"note":"The primary Drawer component is exported as a default export.","wrong":"import { Drawer } from 'react-modern-drawer';","symbol":"Drawer","correct":"import Drawer from 'react-modern-drawer';"},{"note":"Import the TypeScript type definition for Drawer component props. Use `import type` for type-only imports to ensure they are stripped from the JavaScript output.","symbol":"DrawerProps","correct":"import type { DrawerProps } from 'react-modern-drawer';"},{"note":"The component's essential styles must be imported separately. The correct path points to the distributed CSS file, not the source file.","wrong":"import 'react-modern-drawer/src/index.css';","symbol":"CSS Styles","correct":"import 'react-modern-drawer/dist/index.css';"}],"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport Drawer from 'react-modern-drawer';\nimport 'react-modern-drawer/dist/index.css';\n\nconst MyDrawerComponent: React.FC = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const toggleDrawer = useCallback(() => {\n    setIsOpen((prevState) => !prevState);\n  }, []);\n\n  return (\n    <div>\n      <button onClick={toggleDrawer} style={{ padding: '10px 20px', cursor: 'pointer' }}>\n        {isOpen ? 'Close' : 'Open'} Drawer\n      </button>\n\n      <Drawer\n        open={isOpen}\n        onClose={toggleDrawer}\n        direction='right'\n        size={320}\n        className='custom-drawer-style'\n        overlayClassName='custom-overlay-style'\n      >\n        <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}>\n          <h2>Drawer Content</h2>\n          <p>This is a modern drawer example with custom styling.</p>\n          <button onClick={toggleDrawer} style={{ marginTop: '15px' }}>\n            Close from inside\n          </button>\n        </div>\n      </Drawer>\n    </div>\n  );\n};\n\nexport default MyDrawerComponent;","lang":"typescript","description":"This quickstart demonstrates how to integrate and control a modern drawer component in a React application using hooks for state management. It shows how to toggle the drawer, set its direction and size, and apply custom CSS classes."},"warnings":[{"fix":"Ensure you add `import 'react-modern-drawer/dist/index.css';` to your root component or an appropriate entry point in your application.","message":"Failing to import the component's CSS styles will result in an unstyled or non-functional drawer. The styles are crucial for layout and animation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Change named imports to default imports: `import Drawer from 'react-modern-drawer';`","message":"The `Drawer` component is a default export, meaning `import Drawer from 'react-modern-drawer';` is the correct syntax. Using named import syntax like `{ Drawer }` will cause import errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review your TypeScript code for any type errors related to `DrawerProps` or other exported types after upgrading and adjust accordingly.","message":"While the library ships with TypeScript types, specific type improvements in versions like 1.3.1 might introduce minor breaking changes to type signatures if you are using strict TypeScript settings, requiring small adjustments in your type declarations.","severity":"gotcha","affected_versions":">=1.3.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import 'react-modern-drawer/dist/index.css';` to your main application file (e.g., `App.tsx` or `index.tsx`).","cause":"The CSS file for the drawer component was not imported or the path is incorrect.","error":"Module not found: Can't resolve 'react-modern-drawer/dist/index.css' in '...'"},{"fix":"Change the import statement from `import { Drawer } from 'react-modern-drawer';` to `import Drawer from 'react-modern-drawer';`.","cause":"Attempting to import the `Drawer` component as a named export when it is a default export.","error":"TypeError: (0 , react_modern_drawer__WEBPACK_IMPORTED_MODULE_2__.Drawer) is not a function"},{"fix":"Ensure all hook calls are within the body of a functional React component and that your installed React version meets the `>=16.0.0` peer dependency requirement.","cause":"React hooks (like `useState` or `useCallback`) are being used outside of a functional React component, or there's a mismatch in React versions (peer dependency issue).","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}