@mshafiqyajid/react-drawer

npm install @mshafiqyajid/react-drawer

import { useState } from "react";
import { DrawerStyled } from "@mshafiqyajid/react-drawer/styled";
import "@mshafiqyajid/react-drawer/styles.css";

const [open, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Open drawer</button>

<DrawerStyled
  open={open}
  onOpenChange={setOpen}
  title="Navigation"
>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</DrawerStyled>

<DrawerStyled open={open} onOpenChange={setOpen} side="right" title="Settings">
  <p>Slides in from the right.</p>
</DrawerStyled>

<DrawerStyled open={open} onOpenChange={setOpen} size="sm">…</DrawerStyled>
<DrawerStyled open={open} onOpenChange={setOpen} size="md">…</DrawerStyled>
<DrawerStyled open={open} onOpenChange={setOpen} size="lg">…</DrawerStyled>

{/* Custom width — overrides the size preset */}
<DrawerStyled open={open} onOpenChange={setOpen} width={400}>…</DrawerStyled>
<DrawerStyled open={open} onOpenChange={setOpen} width="50vw">…</DrawerStyled>

<DrawerStyled open={open} onOpenChange={setOpen} variant="push" title="Sidebar">
  <nav>…</nav>
</DrawerStyled>

/* Example: shift your main content when the push drawer is open */
.layout-main {
  margin-left: var(--rdrw-push-offset, 0px);
  transition: margin-left 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

{/* Disable swipe to close */}
<DrawerStyled open={open} onOpenChange={setOpen} swipeable={false}>
  …
</DrawerStyled>

{/* Header visible only for the close button — no title */}
<DrawerStyled open={open} onOpenChange={setOpen} showCloseButton>
  <p>Content here.</p>
</DrawerStyled>

{/* Hide close button entirely */}
<DrawerStyled open={open} onOpenChange={setOpen} title="Nav" showCloseButton={false}>
  <p>Content here.</p>
</DrawerStyled>

<DrawerStyled open={open} onOpenChange={setOpen} keepMounted title="Cart">
  {/* Scroll position is remembered between open/close */}
  <CartContents />
</DrawerStyled>

const inputRef = useRef<HTMLInputElement>(null);
const triggerRef = useRef<HTMLButtonElement>(null);

<button ref={triggerRef} onClick={() => setOpen(true)}>Open</button>

<DrawerStyled
  open={open}
  onOpenChange={setOpen}
  initialFocusRef={inputRef}
  finalFocusRef={triggerRef}
>
  <input ref={inputRef} placeholder="Focused on open" />
</DrawerStyled>

import { useDrawer } from "@mshafiqyajid/react-drawer";

const { isOpen, open, close, drawerProps, overlayProps, triggerProps } = useDrawer({
  closeOnEsc: true,
  lockBodyScroll: true,
});

<button {...triggerProps} onClick={open}>Open</button>

{isOpen && (
  <div
    {...overlayProps}
    style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)" }}
    onClick={close}
  >
    <div
      {...drawerProps}
      style={{
        position: "fixed",
        top: 0, left: 0, bottom: 0,
        width: 280,
        background: "#fff",
        padding: "1rem",
      }}
      onClick={(e) => e.stopPropagation()}
    >
      <button onClick={close}>Close</button>
      <nav>…</nav>
    </div>
  </div>
)}

:root {
  --rdrw-width-sm: 240px;
  --rdrw-width-md: 280px;
  --rdrw-width-lg: 320px;
  --rdrw-bg: #ffffff;
  --rdrw-border: #e4e4e7;
  --rdrw-overlay-bg: rgba(0, 0, 0, 0.45);
  --rdrw-fg: #18181b;
  --rdrw-duration: 300ms;
  --rdrw-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --rdrw-overlay-duration: 200ms;
}