react-chop

A react-virtualized alternative without measuring.

Let the browser do its job — Ferran Basora

Check this out:

Some demos: here

Install

npm install react-chop --save

or:

yarn add react-chop

Example

For example, take the following code:

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 (
        <div key={key} className='Item'>
          {list[index]}
        </div>
    )
  }

  render () {
    const { list } = this.state;

    <ChopList
      itemCount={list.length}
      itemRenderer={this.itemRenderer.bind(this)}
    />
  }
}