Getting started
Install the stable 3.0.0 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@3.0.0. 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 state change. 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.
API reference
Every public method (createDrawer, openDrawer, closeDrawer, toggleDrawer, updateDrawer, getDrawer, getDrawers, getParentDrawer, getChildDrawers, destroyDrawer, destroyDrawers, configureDrawer, createDrawerController) documented with signatures and runnable examples.
TypeScript
Root type exports, controller snapshots, the inline close-button shape, and the browser-only DrawerApi type.
Browser global
Load the separate 3.0.0 CSS and JS assets, then 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.