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
If you need certain element in the list to scrollIntoView, 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
| Properties | Instructions | type | Default | version |
|---|---|---|---|---|
| className | Class name. | string | - | 1.1.0 |
| renderMode | Render mode. | collapse| scroll | true | - |
| style | OverflowList style | React.CSSProperties | - | 1.1.0 |
renderMode='collapse'
| Properties | Instructions | type | Default | version |
|---|---|---|---|---|
| collapseFrom | Which direction the items should collapse from: start or end of the children. | start| end | end | 1.1.0 |
| items | All items to display in the list. | Record<string, any>[] | true | - |
| minVisibleItems | The minimum number of visible items that should never collapse into the overflow menu. | number | 0 | 1.1.0 |
| onOverflow | Callback invoked when the overflowed items change. | (overflowItems: Record<string, any>[]) => void | - | 1.1.0 |
| overflowRenderer | Callback invoked to render the overflowed items. | (overflowItems: Record<string, any>[]) => React.ReactNode | - | 1.1.0 |
| visibleItemRenderer | Callback invoked to render each visible item. | (item: Record<string, any>, index: number) => React.ReactElement | - | 1.1.0 |
renderMode='scroll'
| Properties | Instructions | type | Default | version |
|---|---|---|---|---|
| items | All items to display in the list. Key is required. | Record<string, any>[] | true | - |
| onIntersect | Callback invoked when the overflowed items change. | ({[key: string]: IntersectionObserverEntry}) => void | - | 1.1.0 |
| overflowRenderer | Callback invoked to render the overflowed items. | (overflowItems: Record<string, any>[]) => React.ReactNode[] | - | 1.1.0 |
| threshold | At what percentage of the target's visibility the observer's callback should be executed. | number | 0.75 | 1.1.0 |
| visibleItemRenderer | allback invoked to render each visible item. | (item: Record<string, any>, index: number) => React.ReactElement | - | 1.1.0 |
| wrapperClassName | Scroll wrapper classname. | string | - | 1.1.0 |
| wrapperStyle | Scroll wrapper style. | React.CSSProperties | - | 1.1.0 |
