Type Alias DrawerProps

DrawerProps: {
    children: React.ReactNode;
    className?: string;
    closeOnEsc?: boolean;
    from?: DrawerFrom;
    isOpen: boolean;
    onClose: () => void;
    onOverlayClick?: () => void | "close" | null;
    portal?: boolean | HTMLElement;
    scaleContent?: boolean | number;
    scaleSelectors?: string | string[];
    scaleSelectorsMode?: ScaleMode;
    size?: number | string;
}

Type declaration

  • children: React.ReactNode
  • OptionalclassName?: string
  • OptionalcloseOnEsc?: boolean
  • Optionalfrom?: DrawerFrom

    Which edge the drawer slides in from. Defaults to "bottom".

  • isOpen: boolean
  • onClose: () => void
  • OptionalonOverlayClick?: () => void | "close" | null

    What happens when the user clicks (or taps) on the area outside the drawer. Mirrors Modal's prop: "close" (default) calls onClose, a function is invoked directly, and null makes the overlay transparent to pointer/touch events so the underlying page stays interactive. The overlay only renders when there is an "outside" — i.e. size is set or scaleContent is enabled.

  • Optionalportal?: boolean | HTMLElement

    Where to portal the drawer. true (default) portals to document.body so the drawer's position: fixed always anchors to the viewport — needed when any ancestor establishes a containing block (e.g. via transform, filter, or will-change). Pass an HTMLElement to portal to a specific node, or false to render in place.

  • OptionalscaleContent?: boolean | number

    When set, scales the targeted page content down while the drawer is open (use with scaleSelectors) and fades in a subtle tint over it for a stacked "3D" look. true uses the default scale (~0.92), or pass a number to customize (e.g. 0.95).

  • OptionalscaleSelectors?: string | string[]

    CSS selector (or array tried in order) for what to scale when scaleContent is set. The first selector that matches anything wins. Defaults to common app-root selectors ["#__next", "#root", "body>*:first-child"].

  • OptionalscaleSelectorsMode?: ScaleMode

    Whether to scale only the first match of the chosen selector ("first", default) or every match ("all").

  • Optionalsize?: number | string

    How far the drawer extends along its slide axis. Defaults to filling the whole viewport.

    • positive number — size in pixels (e.g. 300 ⇒ 300px tall/wide).
    • negative number — viewport minus pixels (e.g. -100 ⇒ calc(100% - 100px)).
    • string — any CSS length (e.g. "50%", "20rem").

    When set, the drawer's visible edge gets rounded corners.

Settings

Member Visibility