react-viewport-mixin v0.0.3

react-viewport-mixin

A react mixin that improves performance by only rendering visible components.

For the purposes of this component, "visible" means that:

1. The page itself is visible to the user (not in a hidden browser tab)
2. It is at least partly positioned within the current viewport.

React components that use this mixin will not update if the element is not visible. It will, however, update when it becomes visible again, meaning that the user will never know the difference.

Install

npm install react-viewport-mixin

To see it in action, open the demo (build/example/index.html) in your browser.

Usage

var reactViewportMixin = require('react-viewport-mixin');

MyComponent = React.createClass({
  mixins: [reactViewportMixin],
  render: function() {
    // ...
  }
});