https://github.com/mattrothenberg/react-overflow-list

A headless React component that lets you control how visible and overflown items are rendered 👀
https://github.com/mattrothenberg/react-overflow-list

list overflow react resize

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mattrothenberg/react-overflow-list
• Owner: mattrothenberg
• License: mit
• Created: 2021-09-20T23:03:11.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-16T02:44:08.000Z (about 3 years ago)
• Last Synced: 2023-03-01T00:01:54.677Z (almost 2 years ago)
• Topics: list, overflow, react, resize
• Language: TypeScript
• Homepage: https://react-overflow-list.vercel.app/
• Size: 257 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-overflow-list

A hooks based implementation of the `OverflowList` component from [Blueprint JS](https://blueprintjs.com/docs/#core/components/overflow-list).

![ezgif-3-b0d519eb63c8](https://user-images.githubusercontent.com/5148596/134089559-81de1a38-06cd-4c84-8dd4-0937ca040edc.gif)

## Installation

```

yarn add react-overflow-list

```

### Basic Usage

```jsx

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

const ItemRenderer = (item, index) => {

  return {item};

};

const OverflowRenderer = (items) => {

  return + {items.length} more;

};

export function App() {

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

  return (

    

  );

}

```