Use @researchgate/react-intersection-observer; version 1.0.3

Author: Vesa Piittinen

CHANGELOG.md

@@ -5,6 +5,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+## [1.0.3] - 2018-06-13
+
+### Changed
+- Now uses `@researchgate/react-intersection-observer` instead of customized implementation
+
+### Fixed
+- Case where `viewport` and `threshold` were not passed to `Observer` in `Lazy`
+
+
 ## [1.0.2] - 2018-05-31
 
 ### Changed

README.md

@@ -5,9 +5,8 @@
 > Lazy load your content without breaking the internet!
 
 Supports universal rendering including disabled JavaScript by using `noscript` elements that are also friendly to all
-search engines. Uses modern IntersectionObserver API and exposes `Observer` component which works exactly like the
-excellent [@researchgate/react-intersection-observer](https://github.com/researchgate/react-intersection-observer), but
-with a few minor changes.
+search engines. Uses modern IntersectionObserver API using the excellent
+[@researchgate/react-intersection-observer](https://github.com/researchgate/react-intersection-observer).
 
 Also optionally supports displaying the content on IE8 and earlier by adding conditional comments to skip `noscript`
 elements.
@@ -20,22 +19,20 @@ npm install react-lazy
 import { Lazy } from 'react-lazy'
 // or
 import { LazyGroup } from 'react-lazy'
-// or
-import { Observer } from 'react-lazy'
 ```
 
 You also need to polyfill `intersection-observer`! Use polyfill.io or `require('intersection-observer')`. Check
-[Can I use](https://caniuse.com/#feat=intersectionobserver) for browser support status. Additionally features like `Map`
-and `Set` are also required.
+[Can I use](https://caniuse.com/#feat=intersectionobserver) for browser support status. `Map` and `Set` are also
+required, but these are required by React as well.
 
 
 ----
 
 ## Why `react-lazy`?
 
 1. Minimalistic and performant implementation with less dependencies than other solutions
-2. You can choose between ease-of-use (LazyGroup) and do-it-yourself (Lazy, Observer)
-3. The hard part of handling `noscript` is done for you (Lazy, LazyGroup)
+2. You can choose between ease-of-use (LazyGroup) and do-it-yourself (Lazy)
+3. The hard part of handling `noscript` is done for you
 
 
 ----
@@ -92,21 +89,7 @@ import { Lazy } from 'react-lazy'
 
 ## Component introduction
 
-First of all, `Observer` component is exposed. This is a powerful component for using the new IntersectionObserver API.
-The notable differences to the implementation of
-[@researchgate/react-intersection-observer](https://github.com/researchgate/react-intersection-observer) are:
-
-- `viewport` prop is added and preferred over `root` prop
-- `cushion` prop is added and preferred over `rootMargin` prop
-- `onlyOnce` prop deprecation has been enforced and is unsupported
-- Other changes are internal code optimizations for further minor speed improvements and reduced code size
-
-Essentially `react-lazy`'s implementation of `<Observer />` is fully compatible with all the examples and demos you find
-at [@researchgate/react-intersection-observer](https://github.com/researchgate/react-intersection-observer). (This part
-of the text holds true in 2018-05-30 at version 0.7.1 - throw issue if this state changes).
-
-
-As for lazy loading there are two components: `<Lazy />` and `<LazyGroup />`.
+There are two components: `<Lazy />` and `<LazyGroup />`.
 
 **Lazy** provides basic functionality for lazy loading: it keeps render in `noscript` element until it has come into
 viewport and then simply swaps render. **Everything** inside the component is wrapped into `noscript`. As the component

dist/module/components/Lazy.js

@@ -14,9 +14,9 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _Observer = require('./Observer');
+var _reactIntersectionObserver = require('@researchgate/react-intersection-observer');
 
-var _Observer2 = _interopRequireDefault(_Observer);
+var _reactIntersectionObserver2 = _interopRequireDefault(_reactIntersectionObserver);
 
 var _wrap = require('../lib/wrap');
 
@@ -87,16 +87,16 @@ var Lazy = function (_React$PureComponent) {
 
             if (clientOnly || visible && this.state.show) {
                 return _react2.default.createElement(
-                    _Observer2.default,
-                    { cushion: cushion, onChange: this.onViewport, threshold: threshold, viewport: viewport },
+                    _reactIntersectionObserver2.default,
+                    { onChange: this.onViewport, root: viewport, rootMargin: cushion, threshold: threshold },
                     _react2.default.createElement(component, props, visible && this.state.show ? children : null)
                 );
             }
 
             // wrap all contents inside noscript
             return _react2.default.createElement(
-                _Observer2.default,
-                { cushion: cushion, onChange: this.onViewport },
+                _reactIntersectionObserver2.default,
+                { onChange: this.onViewport, root: viewport, rootMargin: cushion, threshold: threshold },
                 _react2.default.createElement(component, (0, _wrap.propsWithNoScriptRender)(children, ltIE9, props))
             );
         }

dist/module/components/LazyGroup.js

@@ -20,9 +20,9 @@ var _DefaultWrapper = require('./DefaultWrapper');
 
 var _DefaultWrapper2 = _interopRequireDefault(_DefaultWrapper);
 
-var _Observer = require('./Observer');
+var _reactIntersectionObserver = require('@researchgate/react-intersection-observer');
 
-var _Observer2 = _interopRequireDefault(_Observer);
+var _reactIntersectionObserver2 = _interopRequireDefault(_reactIntersectionObserver);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -108,8 +108,8 @@ var LazyGroup = function (_React$PureComponent) {
                 props = _objectWithoutProperties(_props2, ['children', 'childrenToWrap', 'childWrapper', 'clientOnly', 'component', 'cushion', 'ltIE9', 'onLoad', 'onViewport', 'threshold', 'viewport', 'visible']);
 
             return _react2.default.createElement(
-                _Observer2.default,
-                { cushion: cushion, onChange: this.onViewport, threshold: threshold, viewport: viewport },
+                _reactIntersectionObserver2.default,
+                { onChange: this.onViewport, root: viewport, rootMargin: cushion, threshold: threshold },
                 _react2.default.createElement(component, props,
                 // swap render once element is visible in viewport
                 clientOnly || visible && this.state.viewportAt

dist/module/components/Observer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Observer = exports.Lazy = exports.LazyGroup = undefined;
+exports.Lazy = exports.LazyGroup = undefined;
 
 var _LazyGroup2 = require('./components/LazyGroup');
 
@@ -13,12 +13,7 @@ var _Lazy2 = require('./components/Lazy');
 
 var _Lazy3 = _interopRequireDefault(_Lazy2);
 
-var _Observer2 = require('./components/Observer');
-
-var _Observer3 = _interopRequireDefault(_Observer2);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.LazyGroup = _LazyGroup3.default;
-exports.Lazy = _Lazy3.default;
-exports.Observer = _Observer3.default;
+exports.Lazy = _Lazy3.default;