react-list-throttle-component

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