function useAnchoredFloat
useAnchoredFloat(
anchorRef: RefObject<HTMLElement | null>,
open: boolean,
): 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.

It returns null while open is false, and also on the first render after opening, until the panel is measured. The caller hides the panel meanwhile.

Parameters

anchorRef: RefObject<HTMLElement | null>
open: boolean

Return Type

CSSProperties | null

Usage

import { useAnchoredFloat } from "src/hooks/shared/useAnchoredFloat.ts";