React Modern Drawer

Common errors

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

  cause 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

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

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

Warnings

• gotcha 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.
  Fix: Ensure you add `import 'react-modern-drawer/dist/index.css';` to your root component or an appropriate entry point in your application.
• gotcha 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.
  Fix: Change named imports to default imports: `import Drawer from 'react-modern-drawer';`
• gotcha 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.
  Fix: Review your TypeScript code for any type errors related to `DrawerProps` or other exported types after upgrading and adjust accordingly.

Install

• npm install react-modern-drawer npm
• yarn add react-modern-drawer yarn
• pnpm add react-modern-drawer pnpm

Imports

• Drawer
  wrong:

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

  correct:

  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
  wrong:

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

  correct:

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

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

Quickstart

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;