useOverflow
@astryxdesign/core v0.7.1 · useOverflow
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
itemCount | MaybeRefOrGetter<number> | — | Total number of items to measure for overflow. |
options | UseOverflowOptions | — | Configuration object for overflow behavior. |
options.gap | number | 0 | Gap between items in pixels. Used in width calculations. |
options.minVisibleItems | number | 0 | Minimum number of items to always show, even if they don't fit. |
options.maxVisibleItems | number | — | Upper bound on visible items, even when everything fits. The floor wins when it is larger. |
options.maxRows | number | — | 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
| Name | Type | Description |
|---|---|---|
containerRef | Ref<HTMLElement | null> | Template ref to attach to the visible container element. |
measureRef | Ref<HTMLElement | null> | Template ref to attach to the hidden measurement container that holds all items. |
visibleCount | Ref<number> | Number of items that fit in the visible container. |
hasOverflow | ComputedRef<boolean> | Whether any items are overflowing (visibleCount < itemCount). |
rows | Ref<number> | How many rows the visible items occupy. 1 in the single-row mode, 0 when nothing is visible. |
rowHeight | Ref<number> | Tallest measured item height, for giving a multi-row container its height. |
remeasure | () => void | Measures 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.
| Name | Type | Description |
|---|---|---|
element | Ref<HTMLElement | null> | Template ref of the box to measure. |
isActive | Ref<boolean> | Whether to measure. While it is false the result stays false. |
return | Ref<boolean> | Whether the content is taller than the box. |