Package Exports

react-lazy-load

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-lazy-load) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Lazy Load Component

Really simple component that renders children elements when they enter the viewport.

Installation

React Lazy Load requires React 0.14 or later.

npm install --save react-lazy-load

Usage

import React, { Component } from 'react';
import LazyLoad from 'react-lazy-load';

class MyComponent extends Component {
  render() {
    return (
      <LazyLoad>
        <div>some content</div>
      </LazyLoad>
    );
  }
}

Props

height={String|Number}

This is used to set the elements height even when it contains no content.

<LazyLoad height={100}>
  <div>some content</div>
</LazyLoad>

threshold={Number}

By default content is loaded when it appears on the screen. If you want content to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.

<LazyLoad threshold={200}>
  <div>some content</div>
</LazyLoad>

onContentVisible={Function}

A callback function to execute when the content appears on the screen.

<LazyLoad onContentVisible={() => { console.log('content visible'); }}>
  <div>some content</div>
</LazyLoad>