useOverflow @astryx-svelte/core v0.3.0 · hooks

Usage

Measures children rendered in a hidden container to determine how many fit in the available width without flickering. Uses ResizeObserver to react to container size changes. The measurement container should hold all items plus an optional overflow indicator element (identified by a data-overflow-indicator attribute). 
ts
 
import { hooks } from '@astryx-svelte/core/hooks';

Best practices

GuidancePractices
DoRender all items into the measureRef container (hidden) and only the first visibleCount items into the containerRef container (visible).
DoInclude an overflow indicator (e.g., "+N more" button) as the last child of the measurement container with a data-overflow-indicator attribute.
Don'tUse for vertical overflow; this hook measures horizontal width only.

Parameters

ParameterTypeDefaultDescription
itemCount Required () => number—Total number of items to measure for overflow.
options () => UseOverflowOptions—Configuration object for overflow behavior.
options.gap number0Gap between items in pixels. Used in width calculations.
options.minVisibleItems number0Minimum number of items to always show, even if they don't fit.
options.collapseFrom 'end' | 'start''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

FieldTypeDefaultDescription
containerRef (node: HTMLElement | null) => void—Ref callback to attach to the visible container element.

Element references are attachments here. The port returns an Attachment<HTMLElement> named attach…; spread it onto the element instead of assigning a ref.Upstream declares React.RefCallback<HTMLElement>.

measureRef (node: HTMLElement | null) => void—Ref callback to attach to the hidden measurement container that holds all items.

Element references are attachments here. The port returns an Attachment<HTMLElement> named attach…; spread it onto the element instead of assigning a ref.Upstream declares React.RefCallback<HTMLElement>.

visibleCount number—Number of items that fit in the visible container.
hasOverflow boolean—Whether any items are overflowing (visibleCount < itemCount).