Warning: very early pre-release alpha hazard zone code
Virtual list that can scroll trillions of items. Potentially up to MAX_SAFE_INTEGER - 1
. Features:
- Lots of freakin' items
- Multiple items per row
- Dynamic items per row via rAF
Inspired by SlickGrid's Implementation
Read the JSFiddle that inspired this. This is basically a port to React of that code.
No npm module yet. You'll need to copy and paste.
Read the code (and then issue a PR =).
So far, I've only tested this within flexbox.
function renderRow(rows) => {
const rowElements = rows.map(row => {
const itemElements = row.map(item => <div>Item number {item}</div>)
return <div className='row-wrapper'>{itemElements}</div>;
});
return <div>{rowItems}</div>
}
<div style={{ flex: 1, display: 'flex', }}>
<SlickScroll
itemCount={100000000}
renderRow={this.renderRow}
rowHeight={100}
itemWidth={260} />
</div>
This is mega-super-alpha. Please file issues or PRs if you would like!
On Safari, scrolling will loose inertia due to virtual items disappearing
- FIX/TODO: Looks like there's a fix, thanks to @jounik: mleibman/SlickGrid#22 (comment)
- Packaging and publishing to npm
- Migrate tests to jsdom and run tests on travis
- probably a ton of other stuff