Skip to content

useOverflow

@astryxdesign/core v0.7.1 · useOverflow

Parameters ​

NameTypeDefaultDescription
itemCountMaybeRefOrGetter<number>—Total number of items to measure for overflow.
optionsUseOverflowOptions—Configuration object for overflow behavior.
options.gapnumber0Gap between items in pixels. Used in width calculations.
options.minVisibleItemsnumber0Minimum number of items to always show, even if they don't fit.
options.maxVisibleItemsnumber—Upper bound on visible items, even when everything fits. The floor wins when it is larger.
options.maxRowsnumber—Wrap up to this many rows before the rest collapse into the indicator. Omitted or 1 keeps a single row.
options.collapseFrom'start' | 'end''end'Which end to collapse items from.
options.behavior'observeParent' | 'observeSelf''observeSelf'Which element to observe for overflow calculations. observeParent uses the container's parent element width, allowing the visible container to remain content-sized.

Returns ​

NameTypeDescription
containerRefRef<HTMLElement | null>Template ref to attach to the visible container element.
measureRefRef<HTMLElement | null>Template ref to attach to the hidden measurement container that holds all items.
visibleCountRef<number>Number of items that fit in the visible container.
hasOverflowComputedRef<boolean>Whether any items are overflowing (visibleCount < itemCount).
rowsRef<number>How many rows the visible items occupy. 1 in the single-row mode, 0 when nothing is visible.
rowHeightRef<number>Tallest measured item height, for giving a multi-row container its height.
remeasure() => voidMeasures again. Useful after a test changes widths, or after the collapse state changes.

Element overload ​

useOverflow(element, isActive) is the other signature. It measures one box instead of a row of items: it reports whether the element's content is taller than its own visible area, and returns a single Ref<boolean>. It is off as long as isActive is false.

NameTypeDescription
elementRef<HTMLElement | null>Template ref of the box to measure.
isActiveRef<boolean>Whether to measure. While it is false the result stays false.
returnRef<boolean>Whether the content is taller than the box.