https://github.com/fcsonline/react-chop

A react-virtualized alternative without measuring
https://github.com/fcsonline/react-chop

infinite-scroll performance react scrollbar scrolling

Last synced: 4 months ago
JSON representation

A react-virtualized alternative without measuring

• Host: GitHub
• URL: https://github.com/fcsonline/react-chop
• Owner: fcsonline
• License: mit
• Created: 2017-02-14T20:34:48.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-30T14:28:25.000Z (about 9 years ago)
• Last Synced: 2025-03-24T02:21:40.357Z (over 1 year ago)
• Topics: infinite-scroll, performance, react, scrollbar, scrolling
• Language: JavaScript
• Homepage:
• Size: 146 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## react-chop

[![Build Status](https://travis-ci.org/react-chop/react-chop.svg?branch=master)](https://travis-ci.org/react-chop/react-chop)

![NPM version](https://img.shields.io/npm/v/react-chop.svg?style=flat)

![NPM license](https://img.shields.io/npm/l/react-chop.svg?style=flat)

![NPM total downloads](https://img.shields.io/npm/dt/react-chop.svg?style=flat)

![NPM monthly downloads](https://img.shields.io/npm/dm/react-chop.svg?style=flat)

A react-virtualized alternative without measuring.

> *Let the browser do its job* — Ferran Basora

Check this out:

![react-chop](https://cloud.githubusercontent.com/assets/135988/24015189/fb8c00de-0a87-11e7-9808-00256a43333e.gif)

Some demos: [here](https://)

## Install

```

npm install react-chop --save

```

or:

```

yarn add react-chop

```

## Example

For example, take the following code:

```js

import ChopList from 'react-chop';

const SIZE = 10000;

class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      list: Array.from({length: SIZE}, (_, i) => i)

    };

  }

  itemRenderer ({ key, index, style}) {

    const { list } = this.state;

    return (

        


          {list[index]}

        

    )

  }


  render () {

    const { list } = this.state;

    

  }

}

```