react-list-lazy-load
Lazy loading wrapper for react-list.
Last updated 3 years ago by goto-bus-stop .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-list-lazy-load 
SYNC missed versions from official npm registry.

react-list-lazy-load

Lazy Loading HOC Wrapper for React-List.

Installation

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

Usage

Demo - Demo source code

React List Lazy Load is a higher order component, so you wrap it around a <ReactList /> element to :sparkles: magically :sparkles: add lazy loading hooks.

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

const MyList = ({ items, onRequestPage }) => (
  <LazyLoading
    length={items.length}
    items={items}
    onRequestPage={onRequestPage}
  >
    <ReactList
      itemRenderer={(idx, key) => (
        <div key={key}>{items[idx]}</div>
      )}
      type="uniform"
      length={items.length}
    />
  </LazyLoading>
);

API

items={Array}

An array of the items you're showing. This is used to determine when to load a page. If the user scrolls close to a null item 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.

length={Number}

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

pageSize={Number}

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

loadMargin={Number}

When to start loading the next page. The next page will be loaded when the user scrolls within loadMargin items 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 larger loadMargin, but if they are rather large, you might be good with a margin of like 1 or 2 items.

Defaults to 5.

onRequestPage={function(page, cb)}

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

Licence

MIT

Current Tags

  • 1.1.1                                ...           latest (3 years ago)

8 Versions

  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.5                                ...           4 years ago
  • 1.0.4                                ...           4 years ago
  • 1.0.3                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (11)

Copyright 2014 - 2017 © taobao.org |