Meta tags:
description= A high-quality, unstyled React drawer component with swipe-to-dismiss gestures.;
keywords= React Drawer,Drawer Component,Side Panel,Bottom Sheet,Swipe Dismiss Drawer,Offcanvas,Sliding Panel,Modal Drawer,Controlled Drawer State,Accessible Drawer,Headless React Components,Base UI;
Headings (most frequently used words):
drawer, propshide, statehide, root, indent, close, provider, indentbackground, trigger, swipearea, virtualkeyboardprovider, portal, backdrop, viewport, popup, content, title, description, action, usage, guidelines, anatomy, examples, api, reference, createhandle, state, position, nested, drawers, snap, points, virtual, keyboard, aware, effect, non, modal, mobile, navigation, swipe, to, open, confirmation, sheet, with, separate, destructive, detached, triggers, stacking, and, animations, handle, actionshide, changeeventreasonhide, changeeventdetailshide, snappointhide, snappointchangeeventdetailshide, snappointchangeeventreasonhide, return, value, constructor, parameters, properties, methods,
Text of the page (most frequently used words):
drawer (684), the (386), classname (208), styles (200), react (126), #description (120), state (119), type (115), open (105), undefined (98), function (93), element (86), div (84), when (79), close (76), name (76), swipe (76), component (73), trigger (72), style (72), data (72), root (71), css (69), popup (66), label (64), content (62), props (61), title (60), viewport (60), that (58), with (55), button (53), string (50), boolean (50), reactelement (48), portal (48), from (47), present (46), render (45), nested (45), href (45), default (44), and (43), event (41), components (41), returns (40), index (38), hide (37), cssproperties (37), backdrop (35), whether (33), false (32), snap (32), import (32), based (31), handle (28), height (28), use (27), payload (26), class (26), export (26), applied (26), dialog (25), prop (25), focus (25), null (24), you (23), drawers (22), module (22), stackblitz (22), modules (22), for (21), base (21), actions (21), const (21), this (20), direction (20), keyboard (20), indent (20), var (20), closed (19), provider (19), void (18), table (18), return (18), action (18), reason (18), point (17), allows (16), another (15), swiping (15), can (15), currently (14), disabled (14), html (14), different (14), renders (14), swipedirection (14), right (14), movement (14), field (14), stack (13), virtualkeyboardprovider (13), swipearea (13), outside (13), modal (13), code (13), alertdialog (13), menu (13), htmlprops (12), accepts (12), replace (12), tag (12), compose (12), object (12), true (12), down (12), animating (12), out (12), ending (12), scroll (12), sheet (12), press (12), indentbackground (12), drawerpopup (12), show (12), used (11), number (11), offset (11), frontmost (11), attribute (11), bottom (11), area (11), tsx (11), input (11), scrollarea (11), not (10), any (10), being (10), swiped (10), variable (10), key (10), snappoints (10), item (10), indicates (9), dismiss (9), transition (9), progress (9), form (9), onopenchange (9), its (9), your (9), confirmation (9), textarea (9), opens (8), detached (8), within (8), are (8), inset (8), edge (8), keyboardevent (8), pointerevent (8), snappoint (8), points (8), usestate (8), client (8), span (8), navigation (8), createhandle (7), example (7), container (7), active (7), scale (7), starting (7), refobject (7), opened (7), while (7), reactnode (7), children (7), aware (7), controlled (7), calc (7), transform (7), demodrawer (7), aria (7), set (6), called (6), triggers (6), expanded (6), transitionstatus (6), htmlelement (6), move (6), gesture (6), cancel (6), mouseevent (6), touchevent (6), non (6), opacity (6), setopen (6), text (6), tweet (6), placeholder (6), checkbox (6), group (6), toggle (6), associate (5), triggerid (5), control (5), value (5), left (5), has (5), full (5), mouse (5), ref (5), keep (5), imperative (5), none (5), need (5), drag (5), interactions (5), user (5), closing (5), eventdetails (5), position (5), stacking (5), using (5), map (5), exampledrawer (5), settextareavalue (5), mobile (5), top (5), footer (5), parameters (4), will (4), method (4), only (4), nativebutton (4), release (4), duration (4), strength (4), axis (4), touch (4), pen (4), interaction (4), behavior (4), determines (4), software (4), hidden (4), handling (4), fields (4), escape (4), watcher (4), propagate (4), uncontrolled (4), after (4), animations (4), trap (4), disablepointerdismissal (4), onsnappointchange (4), numbers (4), rem (4), all (4), parts (4), own (4), context (4), translatey (4), profile (4), add (4), list (4), setdraweropen (4), setconfirmationopen (4), alert (4), clicks (4), portalcontainer (4), setportalcontainer (4), overview (4), card (4), contains (4), closes (3), without (3), should (3), handler (3), effect (3), new (3), via (3), rendered (3), contents (3), parent (3), status (3), focused (3), union (3), body (3), gestures (3), also (3), specify (3), created (3), allowed (3), create (3), there (3), velocity (3), snaptosequentialpoints (3), inside (3), document (3), pointer (3), defaultopen (3), drawersnappoint (3), between (3), values (3), 148px (3), doesn (3), nearest (3), app (3), background (3), drawerbackdrop (3), dismissal (3), variables (3), drawercontent (3), bleed (3), heights (3), settings (3), which (3), place (3), visuallyhidden (3), onclick (3), demo (3), separate (3), destructive (3), confirmationopen (3), textareavalue (3), titleid (3), svg (3), releases (3), accordion (3), autocomplete (3), avatar (3), collapsible (3), combobox (3), fieldset (3), menubar (3), meter (3), otp (3), popover (3), preview (3), radio (3), select (3), separator (3), slider (3), switch (3), tabs (3), toast (3), toolbar (3), tooltip (3), panel (3), header (3), scrollbar (3), screen (3), delivery (3), fieldlabel (3), virtual (3), top_margin_rem (3), view (3), support (3), security (3), device (3), notes (3), anatomy (3), slides (3), opening (2), sets (2), does (2), openwithpayload (2), during (2), methods (2), readonly (2), modifiers (2), isopen (2), properties (2), dialogstore (2), store (2), imperatively (2), native (2), replacing (2), about (2), scalar (2), translating (2), current (2), dismissed (2), nothing (2), finalfocus (2), first (2), initialfocus (2), measured (2), layout (2), wrapped (2), positioning (2), scrollable (2), forcerender (2), dom (2), keepmounted (2), shadowroot (2), into (2), moves (2), provides (2), defaults (2), drawerswipedirection (2), drawerhandle (2), triggered (2), applicable (2), ispropagationallowed (2), iscanceled (2), been (2), canceled (2), allowpropagation (2), cases (2), where (2), stop (2), propagation (2), cancels (2), focusevent (2), snappointchangeeventdetails (2), changeeventdetails (2), unmount (2), associated (2), useful (2), conjunction (2), skipping (2), distance (2), next (2), onopenchangecomplete (2), trapped (2), page (2), locked (2), enabled (2), prevent (2), presses (2), initially (2), defaulttriggerid (2), animation (2), actionsref (2), callback (2), defaultsnappoint (2), represent (2), fractions (2), greater (2), than (2), pixel (2), units (2), 30rem (2), instead (2), before (2), styled (2), effects (2), api (2), reference (2), translatex (2), 100 (2), animate (2), behind (2), visible (2), varying (2), aligned (2), one (2), step (2), depth (2), starts (2), off (2), block (2), draweropen (2), target (2), discard (2), back (2), shown (2), way (2), dismisses (2), htmldivelement (2), here (2), center (2), instructions (2), want (2), items (2), utils (2), long_list (2), nav (2), xicon (2), flick (2), link (2), opt (2), notifications (2), caught (2), good (2), job (2), headerbutton (2), driver (2), note (2), positioned (2), fixed (2), adds (2), keyboards (2), skip (2), visible_snap_points_rem (2), toviewportsnappoint (2), heightrem (2), peek (2), setsnappoint (2), actionsleft (2), advanced (2), htmlfor (2), defaultvalue (2), examples (2), usage (2), guidelines (2), association, rendering, associates, given, provided, must, matching, passed, property, parameter, constructor, creates, connect, drawerclosestate, drawercloseprops, drawerdescriptionstate, drawerdescriptionprops, paragraph, additional, information, drawertitlestate, drawertitleprops, heading, labels, drawercontentstate, drawercontentprops, nesteddrawerswiping, nesteddraweropen, drawerpopupstate, drawerpopupprops, closetype, previously, opentype, tabbable, nesteddialogopen, drawerviewportstate, drawerviewportprops, made, drawerbackdropstate, drawerbackdropprops, forced, even, overlay, displayed, beneath, drawerportalstate, drawerportalprops, mounted, part, appended, drawervirtualkeyboardproviderstate, drawervirtualkeyboardproviderprops, drawerswipeareastate, drawerswipeareaprops, opposite, invisible, listens, was, drawertriggerstate, drawertriggerprops, addition, forwarded, mode, pass, drawerrootsnappointchangeeventreason, snappointchangeeventreason, drawerrootsnappointchangeeventdetails, drawerrootsnappoint, preventunmountonclose, drawerrootchangeeventdetails, drawerrootchangeeventreason, changeeventreason, drawerrootactions, drawerrootstate, drawerrootprops, arg, unknown, payloadchildrenderfunction, disables, complete, but, remain, rest, limited, just, elements, enters, specified, prevents, manually, unmounts, call, externally, finishes, fired, changes, initial, strings, groups, drawerindentstate, drawerindentprops, wrapper, intended, contain, main, applies, drawerindentbackgroundstate, drawerindentbackgroundprops, placed, layer, drawerproviderstate, drawerproviderprops, shared, coordinating, global, such, 400ms, 0ms, timing, fade, durations, directional, smooth, offsets, 300ms, visibility, marks, dim, keeping, 3rem, max, 0px, auto, overflow, stacked, have, collapsed, determine, transitions, depending, achieved, passing, child, pattern, however, defining, practical, involves, placing, linking, them, located, either, simple, exampledraweruncontained, surface, choose, actionbutton, dangersurface, dangerbutton, unfollow, mute, favourites, friends, restrict, builds, grouped, plus, useid, reset, popupdimmed, trim, textareacontainer, onsubmit, preventdefault, submitting, labelledby, required, what, mind, onchange, submit, alertpopup, intro, lost, prompt, implement, both, may, receives, request, automatically, esc, shows, entered, going, discarded, swipelabel, hint, library, whenever, jump, playlists, exampledrawerswipearea, along, enable, display, path, 11m, utilities, exampledrawermobilenav, scrollarearoot, scrollareaviewport, scrollcontent, headerspacer, closebutton, long, longlist, links, thumb, scrollbarthumb, componentprops, width, viewbox, fill, stroke, currentcolor, strokelinecap, square, strokelinejoin, round, build, including, ignores, trapping, wrapping, tree, notifies, mounts, activates, they, receive, attributes, phone, 555, 123, 4567, street, address, computing, apartment, unit, city, san, francisco, postal, 94107, window, backup, contact, grace, hopper, exampledrawervirtualkeyboardaware, headeractions, details, save, gate, drop, spot, anything, else, know, footerslot, stickyfooter, composer, composerinput, ada, lovelace, bare, invalid, alignment, cleanup, always, include, fallback, reserve, slot, below, switches, against, since, descendants, padding, lift, pinned, plain, frame, stable, wrap, make, controls, scrolls, quickly, disable, determined, still, past, multiple, exampledrawersnappoints, margin, dragarea, compact, near, cards, array, length, apply, vertical, preset, treated, account, each, remains, independently, managed, review, sign, activity, update, preferences, passkeys, 2fa, authenticator, signed, devices, options, taller, demonstrate, personal, laptop, rotate, recovery, codes, revoke, older, sessions, rows, done, exampledrawernested, stacks, constant, stays, anchored, ones, scaled, lifted, uses, selector, directions, handled, sheets, other, positions, access, manages, manage, unaffected, supports, selection, interference, descendant, types, ignore, assemble, don, these, extends, side, source, markdown, npm, github, userender, mergeprops, csp, llms, txt, typescript, forms, customization, composition, styling, handbook, community, accessibility, quick, start, search,
Text of the page (random words):
description div classname styles scrollarea ul classname styles list items map item li key item label classname styles item a classname styles link href item href item label a li ul ul classname styles longlist aria label component links long_list map item li key item label classname styles item a classname styles link href item href item label a li ul div drawer content nav drawer popup scrollarea content scrollarea viewport scrollarea scrollbar classname styles scrollbar scrollarea thumb classname styles scrollbarthumb scrollarea scrollbar scrollarea root drawer viewport drawer portal drawer root function xicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor strokelinecap square strokelinejoin round props style display block props style path d m2 5 2 5 11 11m 11 0 11 11 svg show code swipe to open place drawer swipearea along the edge of the viewport to enable swipe to open gestures swipe here swipe from the right edge to open the drawer index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import drawer from base ui react drawer import styles from index module css export default function exampledrawerswipearea const portalcontainer setportalcontainer react usestate htmldivelement null null return div classname styles root ref setportalcontainer drawer root swipedirection right modal false drawer swipearea classname styles swipearea span classname styles swipelabel swipe here span drawer swipearea div classname styles center div classname styles instructions p classname styles hint swipe from the right edge to open the drawer p div div drawer portal container portalcontainer drawer backdrop classname styles backdrop drawer viewport classname styles viewport drawer popup classname styles popup drawer content classname styles content drawer title classname styles title library drawer title drawer description classname styles description swipe from the edge whenever you want to jump back into your playlists drawer description div classname styles actions drawer close classname styles button close drawer close div drawer content drawer popup drawer viewport drawer portal drawer root div show code close confirmation this example shows a nested confirmation dialog that opens if the text entered in the drawer is going to be discarded to implement this both the drawer and the confirmation dialog should be controlled the confirmation dialog may be opened when the onopenchange callback of the drawer receives a request to close while there is text in the textarea this way the confirmation is automatically shown when the user clicks the backdrop presses the esc key clicks a close button or dismisses the drawer with a swipe gesture use eventdetails cancel in onopenchange to prevent the drawer from closing while the confirmation prompt is shown tweet index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import alertdialog from base ui react alert dialog import drawer from base ui react drawer import styles from index module css export default function exampledrawer const draweropen setdraweropen react usestate false const confirmationopen setconfirmationopen react usestate false const textareavalue settextareavalue react usestate const titleid react useid return drawer root swipedirection right open draweropen onopenchange open eventdetails show the close confirmation if there s text in the textarea if open textareavalue eventdetails cancel setconfirmationopen true return if open reset the textarea value settextareavalue setdraweropen open drawer trigger classname styles button tweet drawer trigger drawer portal drawer backdrop classname styles backdrop drawer viewport classname styles viewport drawer popup classname styles popup confirmationopen styles popupdimmed trim drawer content classname styles content drawer title id titleid classname styles title new tweet drawer title form classname styles textareacontainer onsubmit event event preventdefault close the drawer when submitting settextareavalue setdraweropen false textarea aria labelledby titleid required classname styles textarea placeholder what s on your mind value textareavalue onchange event settextareavalue event target value div classname styles actions drawer close classname styles button cancel drawer close button type submit classname styles button tweet button div form drawer content drawer popup drawer viewport drawer portal confirmation dialog alertdialog root open confirmationopen onopenchange setconfirmationopen alertdialog portal alertdialog popup classname styles alertpopup div classname styles intro alertdialog title classname styles title discard tweet alertdialog title alertdialog description classname styles description your tweet will be lost alertdialog description div div classname styles actions alertdialog close classname styles button go back alertdialog close button type button classname styles button onclick setconfirmationopen false settextareavalue setdraweropen false discard button div alertdialog popup alertdialog portal alertdialog root drawer root show code action sheet with separate destructive action this demo builds an action sheet with a grouped list of actions plus a separate destructive action button open action sheet index tsx index module css css modules stackblitz css modules stackblitz use client import as react from react import drawer from base ui react drawer import styles from index module css const actions unfollow mute add to favourites add to close friends restrict export default function exampledraweruncontained const open setopen react usestate false return drawer root open open onopenchange setopen drawer trigger classname styles button open action sheet drawer trigger drawer portal drawer backdrop classname styles backdrop drawer viewport classname styles viewport drawer popup classname styles popup drawer content classname styles surface drawer title classname styles visuallyhidden profile actions drawer title drawer description classname styles visuallyhidden choose an action for this user drawer description ul classname styles actions aria label profile actions actions map action index li key action classname styles action index 0 drawer close classname styles visuallyhidden close action sheet drawer close button type button classname styles actionbutton onclick setopen false action button li ul drawer content div classname styles dangersurface button type button classname styles dangerbutton onclick setopen false block user button div drawer popup drawer viewport drawer portal drawer root show code detached triggers a drawer can be controlled by a trigger located either inside or outside the drawer root component for simple one off interactions place the drawer trigger inside drawer root however if defining the drawer s content next to its trigger is not practical you can use a detached trigger this involves placing the drawer trigger outside of drawer root and linking them with a handle created by the drawer createhandle function detached triggers const demodrawer drawer createhandle drawer trigger handle demodrawer open drawer trigger drawer root handle demodrawer drawer root the drawer can render different content depending on which trigger opened it this is achieved by passing a payload to the drawer trigger and using the function as a child pattern in drawer root detached triggers with payload const demodrawer drawer createhandle title string drawer trigger handle demodrawer payload title profile profile drawer trigger drawer trigger handle demodrawer payload title settings settings drawer trigger drawer root handle demodrawer payload drawer portal drawer popup drawer content drawer title payload title drawer title drawer content drawer popup drawer portal drawer root stacking and animations use css transitions or animations to animate drawer opening closing swipe interactions and nested stacking the data starting style attribute is applied when a drawer starts to open and data ending style is applied when it starts to close the nested drawers css variable can be used to determine stack depth the frontmost drawer has index 0 stack depth drawerpopup stack step 0 05 stack scale calc 1 var nested drawers var stack step transform translatey var drawer swipe movement y scale var stack scale when stacked drawers have varying heights use the drawer height and drawer frontmost height variables to keep collapsed drawers aligned with the frontmost one variable height stacking drawerpopup bleed 3rem stack height max 0px calc var drawer frontmost height var drawer height var bleed height var drawer height auto drawerpopup data nested drawer open height calc var stack height var bleed overflow hidden the data nested drawer open attribute marks drawers behind the frontmost drawer use it with data nested drawer swiping to dim or hide parent drawer content while keeping it visible during nested swipe interactions nested content visibility drawercontent transition opacity 300ms drawerpopup data nested drawer open drawercontent opacity 0 drawerpopup data nested drawer open data nested drawer swiping drawercontent opacity 1 the drawer swipe movement x drawer swipe movement y and drawer snap point offset css variables can be used to create smooth drag and snap offsets swipe and snap offset drawerpopup data swipe direction right transform translatex var drawer swipe movement x drawerpopup data swipe direction down transform translatey calc var drawer snap point offset var drawer swipe movement y the data swipe direction attribute can be used with data ending style to animate directional dismissal swipe dismissal direction drawerpopup data ending style data swipe direction right transform translatex 100 drawerpopup data ending style data swipe direction down transform translatey 100 use drawer swipe progress to fade the backdrop as the drawer is swiped and drawer swipe strength to scale release transition durations based on swipe velocity backdrop and release timing drawerbackdrop backdrop opacity 0 2 opacity calc var backdrop opacity 1 var drawer swipe progress drawerpopup data ending style drawerbackdrop data ending style transition duration calc var drawer swipe strength 400ms drawerpopup data swiping drawerbackdrop data swiping transition duration 0ms api reference provider provides a shared context for coordinating global drawer ui such as indent background effects based on whether any drawer is open doesn t render its own html element component props table prop type default children react reactnode name children type react reactnode undefined drawer provider props hide re export of provider props as drawerproviderprops drawer provider state hide type drawerproviderstate indentbackground an element placed before drawer indent to render a background layer that can be styled based on whether any drawer is open renders a div element component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state drawer indentbackground state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state drawer indentbackground state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state drawer indentbackground state reactelement undefined drawer indentbackground props hide re export of indentbackground props as drawerindentbackgroundprops drawer indentbackground state hide type drawerindentbackgroundstate whether any drawer within the nearest drawer provider is open active boolean indent a wrapper element intended to contain your app s main ui applies data active when any drawer within the nearest drawer provider is open renders a div element component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state drawer indent state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state drawer indent state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state drawer indent state reactelement undefined drawer indent props hide re export of indent props as drawerindentprops drawer indent state hide type drawerindentstate whether any drawer within the nearest drawer provider is open active boolean root groups all parts of the drawer doesn t render its own html element component props table prop type default defaultopen boolean false name defaultopen description whether the drawer is initially open to render a controlled drawer use the open prop instead type boolean undefined default false open boolean name open description whether the drawer is currently open type boolean undefined onopenchange function name onopenchange description event handler called when the drawer is opened or closed type open boolean eventdetails drawer root changeeventdetails void undefined snappoints drawersnappoint name snappoints description snap points used to position the drawer use numbers between 0 and 1 to represent fractions of the viewport height numbers greater than 1 as pixel values or strings in px rem units for example 148px or 30rem type number string undefined defaultsnappoint drawersnappoint null name defaultsnappoint description the initial snap point value when uncontrolled type number string null undefined snappoint drawersnappoint null name snappoint description the currently active snap point use with onsnappointchange to control the snap point type number string null undefined onsnappointchange function name onsnappointchange description callback fired when the snap point changes type snappoint number string null eventdetails drawer root snappointchangeeventdetails void undefined actionsref react refobject drawer root actions null name actionsref description a ref to imperative actions unmount manually unmounts the drawer call this after any externally controlled closing animation finishes close closes the drawer imperatively when called type react refobject drawer root act...
|
