Show · OverflowList
OverflowList
OverflowList is a behavior component used to take list of items and display as many items as can fit inside itself. Overflowed items that do not fit are collected and rendered by callback function. The visible items will be recomputed when a resize is detected.

Demos

How to import

Collapse Mode - Simple

You could use renderMode="collapse" (default) to render items.

Collapse Mode - Direction

collapse mode supports two collapseFrom directions: start and end (default).

Collapse Mode - Visible

collapse mode supports to set up minimum visible items that will not be collected.

Scroll Mode

You could use renderMode="scroll" for a scrollable list.
If you need certain element in the list to scrollIntoView, use document.querySelector(`.item-cls[data-scrollkey="${key}"] to select to corresponding DOM.

API Reference

PropertiesInstructionstypeDefaultversion
classNameClass name.string-1.1.0
onVisibleStateChangeHide and display state change callback(visibleState: Map\<string, boolean>) => void;-2.61.0
renderModeRender mode.collapse| scrolltrue-
styleOverflowList styleReact.CSSProperties-1.1.0

renderMode='collapse'

PropertiesInstructionstypeDefaultversion
collapseFromWhich direction the items should collapse from: start or end of the children.start| endend1.1.0
itemsAll items to display in the list.Record<string, any>[]true-
minVisibleItemsThe minimum number of visible items that should never collapse into the overflow menu.number01.1.0
onOverflowCallback invoked when the overflowed items change.(overflowItems: Record<string, any>[]) => void-1.1.0
overflowRendererCallback invoked to render the overflowed items.(overflowItems: Record<string, any>[]) => React.ReactNode-1.1.0
visibleItemRendererCallback invoked to render each visible item.(item: Record<string, any>, index: number) => React.ReactElement-1.1.0

renderMode='scroll'

PropertiesInstructionstypeDefaultversion
itemsAll items to display in the list. Key is required.Record<string, any>[]true-
onIntersectCallback invoked when the overflowed items change.({[key: string]: IntersectionObserverEntry}) => void-1.1.0
overflowRendererCallback invoked to render the overflowed items.(overflowItems: Record<string, any>[]) => React.ReactNode[]-1.1.0
thresholdAt what percentage of the target's visibility the observer's callback should be executed.number0.751.1.0
visibleItemRendererallback invoked to render each visible item.(item: Record<string, any>, index: number) => React.ReactElement-1.1.0
wrapperClassNameScroll wrapper classname.string-1.1.0
wrapperStyleScroll wrapper style.React.CSSProperties-1.1.0