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):
ing 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 actions null undefined defaulttriggerid string null name defaulttriggerid description id of the trigger that the drawer is associated with this is useful in conjunction with the defaultopen prop to create an initially open drawer type string null undefined disablepointerdismissal boolean false name disablepointerdismissal description whether to prevent the drawer from closing on outside presses for non modal drawers this also prevents the drawer from closing when focus moves outside of it type boolean undefined default false handle drawer handle payload name handle description a handle to associate the drawer with a trigger if specified allows detached triggers to control the drawer s open state can be created with the drawer createhandle method type drawer handle payload undefined modal boolean trap focus true name modal description determines if the drawer enters a modal state when open true user interaction is limited to just the drawer focus is trapped document page scroll is locked and pointer interactions on outside elements are disabled false user interaction with the rest of the document is allowed trap focus focus is trapped inside the drawer but document page scroll is not locked and pointer interactions outside of it remain enabled type boolean trap focus undefined default true onopenchangecomplete function name onopenchangecomplete description event handler called after any animations complete when the drawer is opened or closed type open boolean void undefined snaptosequentialpoints boolean false name snaptosequentialpoints description disables velocity based snap skipping so drag distance determines the next snap point type boolean undefined default false swipedirection drawerswipedirection down name swipedirection description the swipe direction used to dismiss the drawer type up down left right undefined default down triggerid string null name triggerid description id of the trigger that the drawer is associated with this is useful in conjunction with the open prop to create a controlled drawer there s no need to specify this prop when the drawer is uncontrolled that is when the open prop is not set type string null undefined children react reactnode payloadchildrenderfunction payload name children description the content of the drawer type react reactnode arg payload unknown undefined reactnode payload undefined drawer root props hide re export of root props as drawerrootprops drawer root state hide type drawerrootstate drawer root actions hide type drawerrootactions unmount void close void drawer root changeeventreason hide type drawerrootchangeeventreason trigger press outside press escape key close watcher close press focus out imperative action swipe none drawer root changeeventdetails hide type drawerrootchangeeventdetails reason trigger press event keyboardevent mouseevent touchevent pointerevent reason outside press event mouseevent touchevent pointerevent reason escape key event keyboardevent reason close press event keyboardevent mouseevent pointerevent reason focus out event focusevent keyboardevent reason imperative action event event reason none event event reason close watcher event event reason swipe event touchevent pointerevent cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined preventunmountonclose void drawer root snappoint hide type drawerrootsnappoint number string drawer root snappointchangeeventdetails hide type drawerrootsnappointchangeeventdetails reason trigger press event keyboardevent mouseevent touchevent pointerevent reason outside press event mouseevent touchevent pointerevent reason escape key event keyboardevent reason close press event keyboardevent mouseevent pointerevent reason focus out event focusevent keyboardevent reason imperative action event event reason none event event reason close watcher event event reason swipe event touchevent pointerevent cancels base ui from handling the event cancel void allows the event to propagate in cases where base ui will stop the propagation allowpropagation void indicates whether the event has been canceled iscanceled boolean indicates whether the event is allowed to propagate ispropagationallowed boolean the element that triggered the event if applicable trigger element undefined drawer root snappointchangeeventreason hide type drawerrootsnappointchangeeventreason trigger press outside press escape key close watcher close press focus out imperative action swipe none trigger a button that opens the drawer renders a button element component props table prop type default handle drawerhandle payload name handle description a handle to associate the trigger with a drawer can be created with the drawer createhandle method type drawerhandle payload undefined nativebutton boolean true name nativebutton description whether the component renders a native button element when replacing it via the render prop set to false if the rendered element is not a button for example div type boolean undefined default true payload payload name payload description a payload to pass to the drawer when it is opened type payload undefined id string name id description id of the trigger in addition to being forwarded to the rendered element it is also used to specify the active trigger for drawers in controlled mode with the drawer root triggerid prop type string undefined 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 trigger 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 trigger 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 trigger state reactelement undefined drawer trigger props hide re export of trigger props as drawertriggerprops drawer trigger state hide type drawertriggerstate whether the trigger is currently disabled disabled boolean whether the drawer is currently open and was opened by this trigger open boolean swipearea an invisible area that listens for swipe gestures to open the drawer renders a div element component props table prop type default swipedirection drawerswipedirection name swipedirection description the swipe direction that opens the drawer defaults to the opposite of drawer root swipedirection type up down left right undefined disabled boolean false name disabled description whether the swipe area is disabled type boolean undefined default false 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 swipearea 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 swipearea 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 swipearea state reactelement undefined attribute data open present when the drawer is open data closed present when the drawer is closed data disabled present when the swipe area is disabled data swipe direction indicates the swipe direction data swiping present when the drawer is being swiped attribute description data open present when the drawer is open data closed present when the drawer is closed data disabled present when the swipe area is disabled data swipe direction indicates the swipe direction data swiping present when the drawer is being swiped drawer swipearea props hide re export of swipearea props as drawerswipeareaprops drawer swipearea state hide type drawerswipeareastate whether the drawer is currently open open boolean whether the swipe area is currently being swiped swiping boolean the swipe direction that opens the drawer swipedirection up down left right whether the swipe area is disabled disabled boolean virtualkeyboardprovider provides keyboard aware focus and scroll handling for bottom sheet drawers with form fields component props table prop type default children react reactnode name children type react reactnode undefined drawer virtualkeyboardprovider props hide re export of virtualkeyboardprovider props as drawervirtualkeyboardproviderprops drawer virtualkeyboardprovider state hide type drawervirtualkeyboardproviderstate portal a portal element that moves the popup to a different part of the dom by default the portal element is appended to body renders a div element component props table prop type default container union name container description a parent element to render the portal element into type htmlelement shadowroot react refobject htmlelement shadowroot null null undefined 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 portal 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 portal state react cssproperties undefined undefined keepmounted boolean false name keepmounted description whether to keep the portal mounted in the dom while the popup is hidden type boolean undefined default false render reactelement function name render description allows you to replace the compone...
|
