README
React List Throttle
Super simple component just throttle a list to reduce rendering cost of long list.
Installation
$ npm i react-list-throttle-component
or yarn add
Usage
ListThrottle has no
import ListThrottle from 'react-list-throttle';
// ...
return (
<ListThrottle items={strs}>
{({renderPrevItems, renderNextItems, throttledItems}) => (
<SomeAwesomeComponentSupportsScroll
superHandlerCatchOnScrollTop={renderPrevItems}
superHandlerCatchOnScrollEnd={renderNextItems}
>
<ul>
{throttledItems.map(str => (
<li>{str></li>
))}
</ul>
</SomeAwesomeComponentSupportsScroll>
)}
</ListThrottle>
)
ListThrottle has no actual DOM but only functionality.
And also, there is no functionality supports handling onScroll
event. So if you would like to implement a component works like infinite scroller
you just need to implement the handler by yourself.
API
interface ChildArgument<T> {
// function to call previous page which is intented to use event handler for kinda `onScrollTop`
renderPrevItems(): void;
// function to call next page which is intented to use event handler for kinda `onScrollEnd`
renderNextItems(): void;
throttledItems: ReadonlyArray<T>;
}
interface Props<T> {
items: ReadonlyArray<T>;
previousPageBuffer?: number;
contentsPerPage?: number;
children(arg: ChildArgument<T>): ReactNode;
}
Licensed
MIT