Places a floating panel against its anchor with position: fixed, for TextEditor's emoji picker and mention list.

Functions

f
useAnchoredFloat(
anchorRef: RefObject<HTMLElement | null>,
open: boolean,
unnamed 2: AnchoredFloatOptions
): CSSProperties | null

Returns the style that places a panel above or below anchorRef, whichever has more room, kept inside the viewport and following scrolls and resizes. The panel must be portaled out of any clipping ancestor, and its scrolling part must take its height from the --float-max-h property of the style.

Interfaces

I
AnchoredFloatOptions

Passed to useAnchoredFloat by the component that owns the panel, in pixels. The heights let the hook size the panel's scrolling part to the room left.

Usage

import * as mod from "src/hooks/shared/useAnchoredFloat.ts";