Getting started
Install the stable 4.0.1 release, load its stylesheet, and open your first drawer.
@samline/drawer
Per-id vanilla hosts, lazy dialog Presence, and no framework runtime.
These pages document @samline/drawer@4.0.1. The package exposes a createDrawer factory plus a registry of imperative helpers, renders DOM directly into one host per drawer id, and ships both module and browser-global builds. Overlay and dialog content use lazy Presence: they mount only while open (and briefly during the exit transition), while an optional built-in trigger remains in its host when closed.
Why @samline/drawer?
Section titled “Why @samline/drawer?”- Vanilla-first — Works with native HTML pages, embedded scripts, static sites, and server-rendered templates.
- Two consumption modes — Import named exports with a bundler, or link the separate CSS and JS CDN assets to use
window.Drawer. - Custom HTML content —
content,title, anddescriptionacceptstring | number | HTMLElement | (() => HTMLElement)so you can pass pre-built DOM, lazy thunks, or plain text. - CSS contract + live transforms — Open/close states use documented
data-*attributes and the shared stylesheet; drag, snap, viewport, and scale-background updates use targeted inline styles. - Observable controllers —
subscribe(listener)fires immediately with the current snapshot, then on every controller publication. Pair with Redux, Zustand, Pinia, or your own view layer. - Same-id updates — Reusing a drawer
idmerges options into the registered instance instead of creating another host. Destroy unused ids to release their hosts and triggers. - Four directions + scale background — Drag-to-dismiss works for
top,bottom,left, andright; page-shell scaling starts when the drawer opens and follows the active drag. - Zero runtime dependencies — ESM + CJS bundles, root TypeScript declarations, a separate stylesheet, and an IIFE for classic
<script>tags.
Next steps
Section titled “Next steps”Configuration
Every CommonDrawerOptions and VanillaDrawerOptions field with defaults, behaviour, and an example per row. Includes the dedicated Renderable content section for string / number / HTMLElement / () => HTMLElement slots.
Lifecycle and state
Learn what survives close, what destroy releases, when callbacks run, and how to own a drawer safely in an SPA.
Gestures and snap points
Tune ordered snap positions, drag permission, handle cycling, nested drawers, and background scaling.
Accessibility and focus
Name dialogs, manage modal focus, choose dismissal behavior, and test interactive draggable content.
API reference
Every public factory, registry helper, controller method, return value, and lifecycle edge case.
TypeScript
Root type exports, controller snapshots, the inline close-button shape, and the browser-only DrawerApi type.
Browser / CDN
Import the browser namespace module or load separate CSS and JS assets to use window.Drawer without a bundler.
CSS styling
The complete data-attribute contract, four-direction positioning, inline writes, and shared effect ownership.
Recipes
End-to-end patterns: custom HTML content, renderable slots, lifecycle callbacks, all four directions, nested drawers, snap points, scale background, triggers, keyboard handling, and SPA cleanup.