react-responsive-overflow-list

Getting Started

A responsive React component that shows only items that fit and groups the rest into a customizable overflow element. Recalculates automatically on resize.

Installation

pnpm add react-responsive-overflow-list

Basic Usage

The most common pattern uses an items array with a renderItem function:

import { OverflowList } from "react-responsive-overflow-list";

const items = ["One", "Two", "Three", "Four", "Five"];

export default function Example() {
  return (
    <OverflowList
      items={items}
      renderItem={(item) => <span style={{ padding: 4 }}>{item}</span>}
      style={{ gap: 8 }}
      maxRows={1}
    />
  );
}

Children Pattern

Alternatively, pass children directly instead of using items + renderItem:

<OverflowList style={{ gap: 8 }}>
  <button>A</button>
  <button>B</button>
  <button>C</button>
  <button>D</button>
</OverflowList>

Custom Overflow Element

Provide your own overflow UI (button, dropdown menu, etc.) via the renderOverflow prop:

<OverflowList
  items={items}
  renderItem={(item) => <span>{item}</span>}
  renderOverflow={(hidden) => <button>+{hidden.length} more</button>}
/>

Key Props

Here are the most commonly used props. See the API Reference for the complete list.

PropTypeDefaultDescription
itemsT[]—Array of items to render. Use with renderItem.
renderItem(item: T, index: number) => ReactNode—Function to render each visible item.
childrenReactNode—Alternative to items + renderItem pattern.
maxRowsnumber1Number of visible rows before overflow.
renderOverflow(hidden: T[]) => ReactNode—Custom overflow UI (button, menu, etc.).
asReact.ElementType"div"Polymorphic root element.

Next Steps