react-chop

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)}
    />
  }
}