Overflow List
Introduction
OverflowList
takes a generic list of items and renders as many items as can
fit inside itself. Overflowed items that do not fit are collapsed into a single
element. The visible items will be recomputed when a resize is detected.
OverflowList
is used by the
Breadcrumbs
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
All filesUsersJanetPhotosWednesdayimage.jpg
Usage
OverflowList
To use the OverflowList
component, you must pass a list of items
, as well as two rendering
functions: overflowRenderer
and visibleItemRenderer
. The component will call these functions
with the appropriate items to determine the appearance of the visible and hidden items.
API Reference
OverflowList
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to a child element. |
collapseFrom | false | Boundary | Which direction the items should collapse from: start or end of the children. This also determines whether `overflowRenderer` appears before (`START`) or after (`END`) the visible items. |
items | true | T[] | All items to display in the list. Items that do not fit in the container will be rendered in the overflow instead. |
minVisibleItems | false | number | The minimum number of visible items that should never collapse into the overflow menu, regardless of DOM dimensions. |
observeParents | false | boolean | If `true`, all parent DOM elements of the container will also be observed. If changes to a parent's size is detected, the overflow will be recalculated. Only enable this prop if the overflow should be recalculated when a parent element resizes in a way that does not also cause the `OverflowList` to resize. |
onOverflow | false | (overflowItems: T[]) => void | Callback invoked when the overflowed items change. This is called once after the DOM has settled, rather that on every intermediate change. It is not invoked if resizing produces an unchanged overflow state. |
overflowRenderer | true | (overflowItems: T[]) => React.ReactNode | Callback invoked to render the overflowed items. Unlike `visibleItemRenderer`, this prop is invoked once with all items that do not fit in the container. Typical use cases for this prop will put overflowed items in a dropdown menu or display a "+X items" label. |
style | false | CSSProperties | CSS properties to apply to the root element. |
tagName | false | keyof IntrinsicElements | HTML tag name for the container element. |
visibleItemRenderer | true | (item: T, index: number) => React.ReactChild | Callback invoked to render each visible item. Remember to set a `key` on the rendered element! |
Related Reading
Blueprint Reference
Breadcrumbs Documentation