Skip to content

A headless React component that lets you control how visible and overflown items are rendered 👀

License

Notifications You must be signed in to change notification settings

mattrothenberg/react-overflow-list

Repository files navigation

react-overflow-list

A hooks based implementation of the OverflowList component from Blueprint JS.

ezgif-3-b0d519eb63c8

Installation

yarn add react-overflow-list

Basic Usage

import { OverflowList } from 'react-overflow-list';

const ItemRenderer = (item, index) => {
  return <span key={index}>{item}</span>;
};

const OverflowRenderer = (items) => {
  return <span>+ {items.length} more</span>;
};

export function App() {
  const [items] = React.useState(['Apple', 'Banana', 'Orange']);

  return (
    <OverflowList
      collapseFrom="end"
      minVisibleItems={0}
      items={items}
      itemRenderer={ItemRenderer}
      overflowRenderer={OverflowRenderer}
    />
  );
}

About

A headless React component that lets you control how visible and overflown items are rendered 👀

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published