react-progressive-list
v0.1.2
Published
react-progressive-list
Downloads
2,774
Readme
Read the blog post
React Progressive List is an alternative to React Virtualized. It wins in two possible scenarios:
- Your list rows are complex and slow to render. react-virtualized cannot render new rows fast enough to maintain a smooth 60fps scroll.
- You've tried react-virtualized and found it to be overly complicated for your basic needs.
Demo
Install
yarn add react-progressive-list
Example
renderRow = index => {
return <Row key={index} avatar={avatars[index]} name={names[index]} />;
}
render() {
return (
<ReactProgressiveList
initialAmount={40}
progressiveAmount={20}
renderItem={this.renderRow}
renderLoader={() => <Spinner />}
rowCount={400}
useWindowScroll
/>
);
}
Props
| Property | Type | Default | Description |
| :------------------ | :---------------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
| className
| string | undefined | className to apply to the parent div |
| initialAmount
| number | 10 | initial number of rows to display |
| progressiveAmount
| number | 10 | number of rows to render each time a new batch is requested |
| idleAmount
| number | 0 | number of rows to render when the browser is idle (limited browser support for requestIdleCallback) |
| isActive
| boolean | true | setting to false will render the full list without any progressive loading |
| renderItem
| (index: number) => React.Node | required | function that returns the row to render |
| renderLoader
| () => React.Node | () => null | function that returns a loader to render |
| rowCount
| number | required | the length of your list |
| useWindowScroll
| boolean | false | When true will use a scroll listener on the window, otherwise will use a scroll listener on the parent |