@@ -22,8 +22,9 @@ Responsive list for React that shows only items that fit and groups the rest int
2222- Customizable overflow element; ships with a lightweight default
2323- Multi-row support (via ` maxRows ` )
2424- Handles uneven widths, including a single ultra-wide item
25- - TypeScript types; zero runtime deps (React as peers )
25+ - TypeScript types; zero runtime deps (React as peer )
2626- SSR-friendly: measurement runs on the client
27+ - No implicit wrappers around your items. (layout behaves as you expect)
2728
2829## Install
2930
@@ -111,18 +112,19 @@ See the **Flush Immediately** example in the live demo.
111112
112113## API (most used)
113114
114- | Prop | Type | Default | Notes |
115- | --------------------- | --------------------------------------- | ------------ | --------------------------------------------------------------------- |
116- | ` items ` | ` T[] ` | — | Use with ` renderItem ` . Omit when using children. |
117- | ` renderItem ` | ` (item: T, index: number) => ReactNode ` | — | How to render each item. |
118- | ` children ` | ` ReactNode ` | — | Alternative to ` items + renderItem ` . |
119- | ` as ` | ` React.ElementType ` | ` "div" ` | Polymorphic root element. |
120- | ` maxRows ` | ` number ` | ` 1 ` | Visible rows before overflow. |
121- | ` maxVisibleItems ` | ` number ` | ` 100 ` | Hard cap on visible items. |
122- | ` renderOverflow ` | ` (hidden: T[]) => ReactNode ` | default chip | Custom overflow UI. |
123- | ` renderOverflowItem ` | ` (item: T, i: number) => ReactNode ` | ` renderItem ` | For expanded lists/menus. |
124- | ` renderOverflowProps ` | ` Partial<OverflowElementProps<T>> ` | — | Props for default overflow. |
125- | ` flushImmediately ` | ` boolean ` | ` true ` | ` true ` (flushSync, no flicker) vs ` false ` (rAF, faster under resize). |
115+ | Prop | Type | Default | Notes |
116+ | --------------------- | --------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------- |
117+ | ` items ` | ` T[] ` | — | Use with ` renderItem ` . Omit when using children. |
118+ | ` renderItem ` | ` (item: T, index: number) => ReactNode ` | — | How to render each item. |
119+ | ` children ` | ` ReactNode ` | — | Alternative to ` items + renderItem ` . |
120+ | ` as ` | ` React.ElementType ` | ` "div" ` | Polymorphic root element. |
121+ | ` maxRows ` | ` number ` | ` 1 ` | Visible rows before overflow. |
122+ | ` maxVisibleItems ` | ` number ` | ` 100 ` | Hard cap on visible items. |
123+ | ` renderOverflow ` | ` (hidden: T[]) => ReactNode ` | default chip | Custom overflow UI. |
124+ | ` renderOverflowItem ` | ` (item: T, i: number) => ReactNode ` | ` renderItem ` | For expanded lists/menus. |
125+ | ` renderOverflowProps ` | ` Partial<OverflowElementProps<T>> ` | — | Props for default overflow. |
126+ | ` flushImmediately ` | ` boolean ` | ` true ` | ` true ` (flushSync, no flicker) vs ` false ` (rAF, faster under resize). |
127+ | ` renderHiddenItem ` | ` (node: ReactNode, meta) => ReactNode ` | internal | Control visibility of hidden items (defaults to ` React.Activity ` if available, otherwise simply return null). |
126128
127129** Styles:** Root uses ` display:flex; flex-wrap:wrap; align-items:center; ` . Override via ` style ` /` className ` .
128130
@@ -158,6 +160,12 @@ It’s **expected** you’ll wrap `OverflowList` for product needs (design syste
158160- Varying item widths, responsive content
159161- Multi-row overflow detection
160162
163+ ### Hidden items & React versions
164+
165+ - In React 19.2+, hidden items use ` React.Activity ` so overflowed children stay mounted while toggling visibility.
166+ - In React 16–18, overflowed nodes unmount during measurement; pass ` renderHiddenItem ` if you need to keep custom
167+ elements or skeletons mounted and control visibility yourself.
168+
161169---
162170
163171## Requirements
0 commit comments