react-edge-sheet

A lightweight, zero-dependency React component for sliding panels from any screen edge — bottom sheets, drawers, side panels, and more.

~4 kB gzipped. No framer-motion, no emotion, no lodash. Just React.

Features

• Slides from any edge: top, bottom, left, right
• Drag-to-dismiss and snap points
• Focus trap + keyboard navigation (Escape closes, Tab cycles within)
• Animation presets + asymmetric enter/exit transitions
• Controlled (open prop) and imperative (ref) APIs
• Customizable backdrop, drag handle, and portal target
• TypeScript-first — full types for props, refs, and variants

Installation

npm install react-edge-sheet

Quick Start

import { useRef } from 'react';
import { Sheet, SheetRef } from 'react-edge-sheet';

export function Example() {
  const ref = useRef<SheetRef>(null);

  return (
    <>
      <button onClick={() => ref.current?.open()}>Open Sheet</button>

      <Sheet ref={ref} edge="bottom">
        <div style={{ padding: '2rem' }}>
          <p>Content here</p>
          <button onClick={() => ref.current?.close()}>Close</button>
        </div>
      </Sheet>
    </>
  );
}

Drag to Dismiss

<Sheet ref={ref} edge="bottom" showDragHandle>
  <div style={{ padding: '2.5rem 2rem 2rem' }}>
    <p>Drag the handle or swipe down to close</p>
  </div>
</Sheet>

Snap Points

<Sheet
  ref={ref}
  edge="bottom"
  showDragHandle
  snapPoints={['25vh', '50vh', '90vh']}
  defaultSnapPoint={1}
  onSnapChange={(index) => console.log('snapped to', index)}
>
  <div style={{ padding: '2rem' }}>
    <p>Drag to snap between heights</p>
  </div>
</Sheet>

Animation Presets

// animationPreset: 'default' | 'spring' | 'bounce' | 'snappy' | 'slow'
<Sheet ref={ref} edge="bottom" animationPreset="spring">
  ...
</Sheet>

// Asymmetric enter/exit:
<Sheet
  ref={ref}
  edge="bottom"
  enterTransition="transform 0.15s ease"
  exitTransition="transform 0.5s ease"
>
  ...
</Sheet>

Controlled API

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

<Sheet edge="right" open={open} onOpenChange={setOpen}>
  ...
</Sheet>;

Imperative API

const ref = useRef<SheetRef>(null);

ref.current?.open();
ref.current?.close();
ref.current?.toggle();
ref.current?.isOpen; // boolean

Usage with Next.js

Sheet accesses document and uses createPortal, so it must run on the client. Wrap it in a dynamic import:

// MyDrawer.tsx — your component that uses Sheet
import { useRef } from 'react';
import { Sheet, SheetRef } from 'react-edge-sheet';

export default function MyDrawer() {
  const ref = useRef<SheetRef>(null);
  // ...
}

// page.tsx
import dynamic from 'next/dynamic';

const MyDrawer = dynamic(() => import('./MyDrawer'), { ssr: false });

Key Props

| Prop | Type | Default | Description | | ----------------------- | ---------------------------------------- | --------------- | ---------------------------------------------------------------- | | edge | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | Which edge the sheet slides from | | open | boolean | — | Controlled open state | | onOpenChange | (open: boolean) => void | — | Called when open state should change | | draggable | boolean | false | Enable drag-to-dismiss | | showDragHandle | boolean | false | Show drag handle pill (also enables draggable) | | snapPoints | string[] | — | Snap heights/widths e.g. ['25vh','50vh','90vh'] | | defaultSnapPoint | number | last index | Initial snap point index | | animationPreset | AnimationPreset | 'default' | Built-in transition curve | | maxSize | string | — | Max panel size (optional; no default when omitted) | | containerClassName | string | — | CSS class for full-screen overlay (portal root) | | containerStyle | React.CSSProperties | — | Styles merged onto overlay container | | innerWrapperClassName | string | — | Animate-size inner wrapper (see docs; only some configurations) | | innerWrapperStyle | React.CSSProperties | — | Styles merged onto animate-size inner wrapper | | contentClassName | string | — | CSS class for the inner content wrapper | | contentStyle | React.CSSProperties | — | Inline styles for the inner content wrapper | | scrollLock | boolean | true | Lock body scroll while open; false = page stays scrollable | | scrollLockPadding | boolean \| string | true | Body padding during scroll lock (ignored if scrollLock is false) | | animateSize | boolean | true | Animate content height/width changes | | backdrop | boolean | true | Show/hide backdrop | | closeOnBackdropClick | boolean | true | Close when backdrop is clicked | | portal | HTMLElement \| null | document.body | Portal target (null = inline) | | aria-label | string | — | Accessible label for the dialog |

Full API reference and live demos: https://react-sheet.borao.dev

LLM-Friendly Docs

Machine-readable documentation for AI assistants and code search tools:

• llms.txt — Lightweight index with links to all doc sections
• llms-full.txt — Complete documentation in a single plain-text file

License

MIT © Bora Öksüzoglu