useFlipAlign

Flip a panel to the other side when it would overflow.

const side = useFlipAlign(open, panelRef, preferred)

For a panel anchored to one edge of its trigger. Returns the side to use, flipping from the preferred one when the panel would run off the screen (8px is kept clear of the viewport edge) and the other side fits better. When the panel is a child of a relative wrapper the other side is lined up with the opposite edge of that wrapper; it is measured once, each time open becomes true. Handy when building your own dropdown; the library panels use FloatingPanel instead.

API

Parameters

  • openboolean

    Measured each time this becomes true.

  • panelRefRefObject<HTMLElement>

    Ref of the panel to measure.

  • preferred'start' | 'end'

    The side you would like: "start" aligns the left edges, "end" the right edges.

Returns

  • side'start' | 'end'

    The side to use: preferred, or the opposite one when it would not fit.