useOverflow @astryx-svelte/core v0.5.2 · 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 and measured-child 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).