API Reference

Complete documentation of all props and types for the OverflowList component.

Props

Prop	Type	Default	Description
`items`	`T[]`	—	Array of items to render. Use with renderItem. Omit when using children.
`renderItem`	`(item: T, index: number) => ReactNode`	—	How to render each visible item.
`children`	`ReactNode`	—	Alternative to items + renderItem pattern.
`as`	`React.ElementType`	`"div"`	Polymorphic root element.
`maxRows`	`number`	`1`	Number of visible rows before overflow.
`maxVisibleItems`	`number`	`100`	Hard cap on visible items.
`renderOverflow`	`(hidden: T[]) => ReactNode`	—	Custom overflow UI. Receives array of hidden items.
`renderOverflowItem`	`(item: T, index: number) => ReactNode`	—	How to render items in expanded lists/menus. Defaults to renderItem.
`renderOverflowProps`	`Partial<OverflowElementProps<T>>`	—	Props passed to the default overflow element.
`flushImmediately`	`boolean`	`true`	true uses flushSync for no flicker. false uses rAF for better performance during rapid resize.
`renderItemVisibility`	`(node: ReactNode, meta: RenderItemVisibilityMeta) => ReactNode`	—	Control visibility of hidden items. Defaults to React.Activity (19.2+) or null.

The root element uses display: flex; flex-wrap: wrap; align-items: center; by default. Override via style or className props.

Ships with a minimal chip that renders +{count} more. Replace with renderOverflow for custom UI like dropdown menus.

import type {
  OverflowListProps,
  RenderItemVisibilityMeta,
  OverflowElementProps,
} from "react-responsive-overflow-list";

Measures all items and computes how many fit within maxRows
Re-tests with the overflow indicator; if it would create a new row, hides one more item
Renders the stable "normal" state until container size changes

flushImmediately=true — Immediate, flicker-free (uses flushSync)
flushImmediately=false — Defer with rAF; smoother under rapid resize but may flicker briefly

React 19.2+: Hidden items use React.Activity so overflowed children stay mounted while toggling visibility.
React 16–18: Overflowed nodes unmount during measurement. Use renderItemVisibility if you need custom visibility control.