Registry / web-framework / react-modern-drawer

react-modern-drawer

library1.4.0jsnpmunverified

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.

web-framework

npm install react-modern-drawer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-MODERN-DRAWE

react-modern-drawer

web-frameworkjavascriptv1.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Drawer

✓ import Drawer from 'react-modern-drawer';

✗ import { Drawer } from 'react-modern-drawer';

The primary Drawer component is exported as a default export.

DrawerProps

✓ import type { DrawerProps } from 'react-modern-drawer';

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.

CSS Styles

✓ import 'react-modern-drawer/dist/index.css';

✗ import 'react-modern-drawer/src/index.css';

The component's essential styles must be imported separately. The correct path points to the distributed CSS file, not the source file.

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.

import React, { useState, useCallback } from 'react'; import Drawer from 'react-modern-drawer'; import 'react-modern-drawer/dist/index.css'; const MyDrawerComponent: React.FC = () => { const [isOpen, setIsOpen] = useState<boolean>(false); const toggleDrawer = useCallback(() => { setIsOpen((prevState) => !prevState); }, []); return ( <div> <button onClick={toggleDrawer} style={{ padding: '10px 20px', cursor: 'pointer' }}> {isOpen ? 'Close' : 'Open'} Drawer </button> <Drawer open={isOpen} onClose={toggleDrawer} direction='right' size={320} className='custom-drawer-style' overlayClassName='custom-overlay-style' > <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}> <h2>Drawer Content</h2> <p>This is a modern drawer example with custom styling.</p> <button onClick={toggleDrawer} style={{ marginTop: '15px' }}> Close from inside </button> </div> </Drawer> </div> ); }; export default MyDrawerComponent;

Debug

Known issues

gotchaFailing to import the component's CSS styles will result in an unstyled or non-functional drawer. The styles are crucial for layout and animation.

fix

Ensure you add `import 'react-modern-drawer/dist/index.css';` to your root component or an appropriate entry point in your application.

affects: >=1.0.0

gotchaThe `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.

fix

Change named imports to default imports: `import Drawer from 'react-modern-drawer';`

affects: >=1.0.0

gotchaWhile 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.

fix

Review your TypeScript code for any type errors related to `DrawerProps` or other exported types after upgrading and adjust accordingly.

affects: >=1.3.1

Errors

Common errors & fixes

Module not found: Can't resolve 'react-modern-drawer/dist/index.css' in '...'

The CSS file for the drawer component was not imported or the path is incorrect.

fix

Add `import 'react-modern-drawer/dist/index.css';` to your main application file (e.g., `App.tsx` or `index.tsx`).

TypeError: (0 , react_modern_drawer__WEBPACK_IMPORTED_MODULE_2__.Drawer) is not a function

Attempting to import the `Drawer` component as a named export when it is a default export.

fix

Change the import statement from `import { Drawer } from 'react-modern-drawer';` to `import Drawer from 'react-modern-drawer';`.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

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).

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.

Upgrade

Version history

1.4.0latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for the React component to function correctly.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Farzin-Firoozi/react-modern-drawer ↗

packagehttps://www.npmjs.com/package/react-modern-drawer ↗

homepagehttps://modern-drawer.vercel.app ↗