@mshafiqyajid/react-sheet

npm install @mshafiqyajid/react-sheet

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

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

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

<SheetStyled
  open={open}
  onOpenChange={setOpen}
  title="Options"
  footer={<button onClick={() => setOpen(false)}>Done</button>}
>
  <p>Sheet content goes here.</p>
</SheetStyled>

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

<SheetStyled open={open} onOpenChange={setOpen} side="top" title="Notifications">
  <p>Slides down from the top.</p>
</SheetStyled>

<SheetStyled open={open} onOpenChange={setOpen} side="left" title="Navigation">
  <p>Slides in from the left.</p>
</SheetStyled>

<SheetStyled
  open={open}
  onOpenChange={setOpen}
  snapPoints={["40vh", "80vh"]}
  defaultSnapPoint="40vh"
  onSnapPointChange={(snap) => console.log("snapped to", snap)}
>
  <p>Drag up to expand to 80 vh, drag past threshold to dismiss.</p>
</SheetStyled>

<SheetStyled
  open={open}
  onOpenChange={setOpen}
  swipeToDismiss={true}
  swipeThreshold={80}
>
  <p>Drag more than 80 px to dismiss.</p>
</SheetStyled>

{/* Disable swipe */}
<SheetStyled open={open} onOpenChange={setOpen} swipeToDismiss={false}>
  <p>Swipe disabled — use the overlay or Escape to close.</p>
</SheetStyled>

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

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

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

<SheetStyled
  open={open}
  onOpenChange={setOpen}
  onAfterOpen={() => console.log("sheet fully open")}
  onAfterClose={() => console.log("sheet fully closed")}
>
  <p>Content</p>
</SheetStyled>

import { useSheet } from "@mshafiqyajid/react-sheet";

const { isOpen, open, close, sheetProps, overlayProps, handleProps, dragY } = useSheet({
  swipeToDismiss: true,
  swipeThreshold: 60,
});

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

{isOpen && (
  <div {...overlayProps} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)" }}>
    <div
      {...sheetProps}
      style={{
        position: "fixed",
        bottom: 0, left: 0, right: 0,
        background: "#fff",
        borderRadius: "16px 16px 0 0",
        padding: "1rem",
        transform: dragY > 0 ? `translateY(${dragY}px)` : undefined,
      }}
    >
      <div {...handleProps} style={{ width: 40, height: 5, background: "#ccc", borderRadius: 9999, margin: "0 auto 1rem" }} />
      <p>Headless sheet with drag tracking.</p>
      <button onClick={close}>Close</button>
    </div>
  </div>
)}