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

Examples

• Basic

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>