JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 144994
  • Score
    100M100P100Q162804F
  • License MIT

Simple lazy loading component built with react

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.

Dependency Status NPM downloads

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 images are loaded when they appear on the screen. If you want images 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>