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