Package Exports

react-lazyrender-mixin

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-lazyrender-mixin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React LazyRender Mixin

A React mixin to lazily render a component when it enters the viewport.

Installation

npm install react-lazyrender-mixin

Documentation

The mixin renders a placeholder instead of the actual component if the component is outside the viewport. The placeholder has the same element type as the component and will also use the component's className property.

Props

placeholderHeight (string; optional; default: null): The height of the placeholder. Can be used if the component's style/class doesn't already have a height.
placeholderClassName (string; optional; default: null): An additional class name for the placeholder. Can be used to set height instead of using placeholderHeight.
topTreshold (number; optional; default: 0): Additional pixels at the top of the component to determine if it's in the viewport.
bottomTreshold (number; optional; default: 0): Additional pixels at the bottom of the component to determine if it's in the viewport.

Example Component

import React from 'react';
import LazyRenderMixin from 'react-lazyrender-mixin';

export default React.createClass({

  mixins: [ LazyRenderMixin ],

  getDefaultProps () {
    return {
      placeholderHeight: 432,
      bottomTreshold: 450
    };
  },

  render () {
    return(
      <div className="hello-lazy">
        <img src="http://i.imgur.com/TfM2lF0.gif" />
        <br />I'm so lazy
      </div>
    );
  }

});

License

MIT