react-list-lazy-load

Lazy Loading wrapper for React-List.

This component works for finite collections only. If you have a large list of a
known size that you do not want to load all at once, this component allows
loading pages once the user scrolls near them. It does not implement
infinite scrolling.

[![npm][npm-image]][npm-url]
[![travis][travis-image]][travis-url]
[![size][size-image]][size-url]

[npm-image]: https://img.shields.io/npm/v/react-list-lazy-load.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-list-lazy-load
[travis-image]: https://img.shields.io/travis/u-wave/react-list-lazy-load.svg?style=flat-square
[travis-url]: https://travis-ci.org/u-wave/react-list-lazy-load
[size-image]: https://img.shields.io/bundlephobia/minzip/react-list-lazy-load.svg?style=flat-square
[size-url]: https://bundlephobia.com/result?p=react-list-lazy-load

Installation

``bash npm install --save react-list-lazy-load`

`Usage`

Demo - Demo source code

You wrap it around a element to :sparkles: magically :sparkles: add lazy loading hooks:

`js import ReactList from 'react-list'; import LazyLoading from 'react-list-lazy-load';

const MyList = ({ items, onRequestPage }) => ( length={items.length} items={items} onRequestPage={onRequestPage} > itemRenderer={(idx, key) => (

{items[idx]}


      )}
      type="uniform"
      length={items.length}
    />
  
);


API
$3

An array of the items you're showing. This is used to determine when to load a page. If the user scrolls close to anullitem in this array, or outside of array bounds, a new page will be loaded.

I.e., a null item is regarded as an unloaded item.

`$3`

The total amount of items, on all "pages". Defaults to

`$3`

Amount of items on a page. This is used to determine which page to load. Defaults to 25 (rather arbitrarily).

`$3`

When to start loading the next page. The next page will be loaded when the user scrolls withinloadMarginitems from an unloaded item. You'll want to change this depending on the size of your items. If your items are super small, you should pick a largerloadMargin, but if they are rather large, you might be good with a margin of like 1 or 2 items.

Defaults to 5.

`$3`

Callback to load a page. This only tells you to load a new page--you should merge it into theitems` prop yourself.

Licence

MIT

react-list-lazy-load

Lazy Loading wrapper for React-List.

[![npm][npm-image]][npm-url]
[![travis][travis-image]][travis-url]
[![size][size-image]][size-url]

Installation

``bash npm install --save react-list-lazy-load`

`Usage`

Demo - Demo source code

You wrap it around a element to :sparkles: magically :sparkles: add lazy loading hooks:

`js import ReactList from 'react-list'; import LazyLoading from 'react-list-lazy-load';

const MyList = ({ items, onRequestPage }) => ( length={items.length} items={items} onRequestPage={onRequestPage} > itemRenderer={(idx, key) => (

{items[idx]}


      )}
      type="uniform"
      length={items.length}
    />
  
);


API
$3

An array of the items you're showing. This is used to determine when to load a page. If the user scrolls close to anullitem in this array, or outside of array bounds, a new page will be loaded.

I.e., a null item is regarded as an unloaded item.

`$3`

The total amount of items, on all "pages". Defaults to

`$3`

Amount of items on a page. This is used to determine which page to load. Defaults to 25 (rather arbitrarily).

`$3`

Defaults to 5.

`$3`

Callback to load a page. This only tells you to load a new page--you should merge it into theitems` prop yourself.

Licence

MIT