react-intersection-observer - npm Package Compare versions

Comparing version 5.0.5 to 6.0.0

dist/react-intersection-observer.cjs.js

@@ -197,4 +197,4 @@ 'use strict';
  <Observer>
- {inView => (
-   <h1>{`${inView}`}</h1>
+ {({inView, ref}) => (
+   <h1 ref={ref}>{`${inView}`}</h1>
  )}
@@ -230,4 +230,9 @@ </Observer>
   Observer.prototype.componentDidMount = function componentDidMount() {
-    if (typeof this.props.render === 'function') {
-      invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe, when using render prop.');
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.hasOwnProperty('render')) {
+        console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node);
+      } else if (typeof this.props.children !== 'function') {
+        console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node);
+      }
+      invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.');
     }
@@ -286,13 +291,9 @@ };
 
+    var renderMethod = children || render;
 
-    if (typeof render === 'function') {
-      return render({ inView: inView, ref: this.handleNode });
+    if (typeof renderMethod === 'function') {
+      return renderMethod({ inView: inView, ref: this.handleNode });
     }
 
-    return React.createElement(tag, _extends({}, props, {
-      ref: this.handleNode
-    }),
-    // If children is a function, render it with the current inView status.
-    // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-    typeof children === 'function' ? children(inView) : children);
+    return React.createElement(tag || 'div', _extends({ ref: this.handleNode }, props), children);
   };
@@ -304,3 +305,2 @@
 Observer.defaultProps = {
-  tag: 'div',
   threshold: 0,
@@ -307,0 +307,0 @@ triggerOnce: false

dist/react-intersection-observer.esm.js

@@ -193,4 +193,4 @@ import { createElement, Component } from 'react';
  <Observer>
- {inView => (
-   <h1>{`${inView}`}</h1>
+ {({inView, ref}) => (
+   <h1 ref={ref}>{`${inView}`}</h1>
  )}
@@ -226,4 +226,9 @@ </Observer>
   Observer.prototype.componentDidMount = function componentDidMount() {
-    if (typeof this.props.render === 'function') {
-      invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe, when using render prop.');
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.hasOwnProperty('render')) {
+        console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node);
+      } else if (typeof this.props.children !== 'function') {
+        console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node);
+      }
+      invariant(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.');
     }
@@ -282,13 +287,9 @@ };
 
+    var renderMethod = children || render;
 
-    if (typeof render === 'function') {
-      return render({ inView: inView, ref: this.handleNode });
+    if (typeof renderMethod === 'function') {
+      return renderMethod({ inView: inView, ref: this.handleNode });
     }
 
-    return createElement(tag, _extends({}, props, {
-      ref: this.handleNode
-    }),
-    // If children is a function, render it with the current inView status.
-    // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-    typeof children === 'function' ? children(inView) : children);
+    return createElement(tag || 'div', _extends({ ref: this.handleNode }, props), children);
   };
@@ -300,3 +301,2 @@
 Observer.defaultProps = {
-  tag: 'div',
   threshold: 0,
@@ -303,0 +303,0 @@ triggerOnce: false

dist/react-intersection-observer.umd.js

@@ -233,4 +233,4 @@ (function (global, factory) {
    <Observer>
-   {inView => (
-     <h1>{`${inView}`}</h1>
+   {({inView, ref}) => (
+     <h1 ref={ref}>{`${inView}`}</h1>
    )}
@@ -266,4 +266,9 @@ </Observer>
     Observer.prototype.componentDidMount = function componentDidMount() {
-      if (typeof this.props.render === 'function') {
-        invariant_1(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe, when using render prop.');
+      {
+        if (this.props.hasOwnProperty('render')) {
+          console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"', this.node);
+        } else if (typeof this.props.children !== 'function') {
+          console.warn('react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.', this.node);
+        }
+        invariant_1(this.node, 'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.');
       }
@@ -322,13 +327,9 @@ };
 
+      var renderMethod = children || render;
 
-      if (typeof render === 'function') {
-        return render({ inView: inView, ref: this.handleNode });
+      if (typeof renderMethod === 'function') {
+        return renderMethod({ inView: inView, ref: this.handleNode });
       }
 
-      return React.createElement(tag, _extends({}, props, {
-        ref: this.handleNode
-      }),
-      // If children is a function, render it with the current inView status.
-      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-      typeof children === 'function' ? children(inView) : children);
+      return React.createElement(tag || 'div', _extends({ ref: this.handleNode }, props), children);
     };
@@ -340,3 +341,2 @@
   Observer.defaultProps = {
-    tag: 'div',
     threshold: 0,
@@ -343,0 +343,0 @@ triggerOnce: false

dist/react-intersection-observer.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactIntersectionObserver=t(e.React)}(this,function(a){"use strict";var d=new Map,l=new Map;function c(o){if(o){var e=d.get(o);if(e){var r=e.observerId,t=e.observer,n=r?l.get(r):t;n&&n.unobserve(o);var i=!1;r&&d.forEach(function(e,t){e&&e.observerId===r&&t!==o&&(i=!0)}),n&&!i&&(n.disconnect(),l.delete(r)),d.delete(o)}}}function f(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.target,n=d.get(r);if(n&&0<=o){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<o:e<=o}):void 0!==i.threshold&&(s=n.visible?o>i.threshold:o>=i.threshold),void 0!==t&&(s=s&&t),n.visible=s,n.callback&&n.callback(s)}})}var e=function(e,t,o,r,n,i,s,a){if(!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var h=[o,r,n,i,s,a],d=0;(c=new Error(t.replace(/%s/g,function(){return h[d++]}))).name="Invariant Violation"}throw c.framesToPop=1,c}},h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},p=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},t=function(i){function s(){var e,t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s);for(var o=arguments.length,r=Array(o),n=0;n<o;n++)r[n]=arguments[n];return(e=t=p(this,i.call.apply(i,[this].concat(r)))).state={inView:!1},t.node=null,t.handleNode=function(e){t.node&&c(t.node),t.node=e,t.observeNode()},t.handleChange=function(e){t.setState({inView:e}),t.props.onChange&&t.props.onChange(e)},p(t,e)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(s,i),s.prototype.componentDidMount=function(){"function"==typeof this.props.render&&e(this.node,'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe, when using render prop.')},s.prototype.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(c(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(c(this.node),this.node=null)},s.prototype.componentWillUnmount=function(){this.node&&(c(this.node),this.node=null)},s.prototype.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,o=e.root,r=e.rootMargin,n=e.rootId;!function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{threshold:0},r=arguments[3],n=o.root,i=o.rootMargin,s=o.threshold||0;if(e&&t){var a=i?s.toString()+"_"+i:""+s.toString();n&&(a=r?r+"_"+a:null);var c=a?l.get(a):null;c||(c=new IntersectionObserver(f,o),a&&l.set(a,c));var h={callback:t,visible:!1,options:o,observerId:a,observer:a?void 0:c};d.set(e,h),c.observe(e)}}(this.node,this.handleChange,{threshold:t,root:o,rootMargin:r},n)}},s.prototype.render=function(){var e=this.props,t=e.children,o=e.render,r=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,t){var o={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(o[r]=e[r]);return o}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView;return"function"==typeof o?o({inView:i,ref:this.handleNode}):a.createElement(r,h({},n,{ref:this.handleNode}),"function"==typeof t?t(i):t)},s}(a.Component);return t.defaultProps={tag:"div",threshold:0,triggerOnce:!1},t});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.ReactIntersectionObserver=t(e.React)}(this,function(a){"use strict";var l=new Map,d=new Map;function c(o){if(o){var e=l.get(o);if(e){var r=e.observerId,t=e.observer,n=r?d.get(r):t;n&&n.unobserve(o);var i=!1;r&&l.forEach(function(e,t){e&&e.observerId===r&&t!==o&&(i=!0)}),n&&!i&&(n.disconnect(),d.delete(r)),l.delete(o)}}}function p(e){e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.target,n=l.get(r);if(n&&0<=o){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<o:e<=o}):void 0!==i.threshold&&(s=n.visible?o>i.threshold:o>=i.threshold),void 0!==t&&(s=s&&t),n.visible=s,n.callback&&n.callback(s)}})}var h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},f=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},e=function(i){function s(){var e,t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s);for(var o=arguments.length,r=Array(o),n=0;n<o;n++)r[n]=arguments[n];return(e=t=f(this,i.call.apply(i,[this].concat(r)))).state={inView:!1},t.node=null,t.handleNode=function(e){t.node&&c(t.node),t.node=e,t.observeNode()},t.handleChange=function(e){t.setState({inView:e}),t.props.onChange&&t.props.onChange(e)},f(t,e)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(s,i),s.prototype.componentDidMount=function(){},s.prototype.componentDidUpdate=function(e,t){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(c(this.node),this.observeNode()),t.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(c(this.node),this.node=null)},s.prototype.componentWillUnmount=function(){this.node&&(c(this.node),this.node=null)},s.prototype.observeNode=function(){if(this.node){var e=this.props,t=e.threshold,o=e.root,r=e.rootMargin,n=e.rootId;!function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{threshold:0},r=arguments[3],n=o.root,i=o.rootMargin,s=o.threshold||0;if(e&&t){var a=i?s.toString()+"_"+i:""+s.toString();n&&(a=r?r+"_"+a:null);var c=a?d.get(a):null;c||(c=new IntersectionObserver(p,o),a&&d.set(a,c));var h={callback:t,visible:!1,options:o,observerId:a,observer:a?void 0:c};l.set(e,h),c.observe(e)}}(this.node,this.handleChange,{threshold:t,root:o,rootMargin:r},n)}},s.prototype.render=function(){var e=this.props,t=e.children,o=e.render,r=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,t){var o={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(o[r]=e[r]);return o}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=t||o;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(r||"div",h({ref:this.handleNode},n),t)},s}(a.Component);return e.defaultProps={threshold:0,triggerOnce:!1},e});

index.d.ts

@@ -9,8 +9,5 @@ import React = require('react')
 export interface IntersectionObserverProps {
-  /** Children should be either a function or a node */
-  children?: React.ReactNode | ((inView: boolean) => React.ReactNode)
+  /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */
+  children?: (fields: RenderProps) => React.ReactNode
 
-  /** Render prop boolean indicating inView state */
-  render?: (fields: RenderProps) => React.ReactNode
-
   /**
@@ -38,8 +35,2 @@ * The `HTMLElement` that is used as the viewport for checking visibility of
 
-  /**
-   * Element tag to use for the wrapping component
-   * @default `'div'`
-   */
-  tag?: string
-
   /** Number between 0 and 1 indicating the the percentage that should be
@@ -46,0 +37,0 @@ * visible before triggering. Can also be an array of numbers, to create

package.json

 {
   "name": "react-intersection-observer",
-  "version": "5.0.5",
+  "version": "6.0.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -30,8 +30,8 @@ "main": "dist/react-intersection-observer.cjs.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "build": "rm -rf dist && npm run build:lib && npm run build:flow",
+    "build": "rm -rf dist && yarn run build:lib && yarn run build:flow",
     "build:lib": "run-p rollup:*",
     "build:storybook": "build-storybook --output-dir example",
     "build:flow": "node scripts/create-flow",
-    "dev": "concurrently -k -r 'jest --watch' 'npm run storybook'",
-    "lint": "eslint {src,stories,tests}/. ",
+    "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
+    "lint": "eslint {src,stories,tests}/**/*.js ",
     "rollup:es": "rollup -c --environment FORMAT:es",
@@ -43,3 +43,3 @@ "rollup:cjs": "rollup -c --environment FORMAT:cjs",
     "postcommit": "git update-index --again",
-    "prepare": "npm run build",
+    "prepare": "yarn build",
     "pretty": "prettier '**/*.{js,md,json}' --write",
@@ -90,8 +90,8 @@ "storybook": "start-storybook -p 9000",
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.5",
-    "@storybook/addon-options": "^3.4.5",
-    "@storybook/react": "^3.4.5",
+    "@storybook/addon-actions": "^3.4.8",
+    "@storybook/addon-options": "^3.4.8",
+    "@storybook/react": "^3.4.8",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.26.3",
-    "babel-jest": "^22.4.3",
+    "babel-jest": "^23.0.0",
     "babel-plugin-external-helpers": "^6.22.0",
@@ -102,3 +102,3 @@ "babel-preset-env": "^1.7.0",
     "babel-runtime": "^6.25.0",
-    "concurrently": "3.5.1",
+    "concurrently": "3.6.0",
     "coveralls": "^3.0.1",
@@ -108,17 +108,17 @@ "enzyme": "^3.3.0",
     "enzyme-to-json": "^3.3.4",
-    "eslint": "^4.19.1",
+    "eslint": "^5.0.0",
     "eslint-config-insilico": "^5.2.0",
-    "flow-bin": "^0.72.0",
-    "flow-copy-source": "^1.3.0",
+    "flow-bin": "^0.75.0",
+    "flow-copy-source": "^2.0.0",
     "husky": "^0.14.3",
     "intersection-observer": "^0.5.0",
-    "jest": "^22.4.3",
-    "lint-staged": "^7.0.0",
+    "jest": "^23.1.0",
+    "lint-staged": "^7.2.0",
     "npm-run-all": "^4.1.3",
-    "prettier": "^1.12.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-test-renderer": "^16.3.2",
-    "rollup": "^0.59.1",
-    "rollup-plugin-babel": "^3.0.3",
+    "prettier": "^1.13.5",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "react-test-renderer": "^16.4.1",
+    "rollup": "^0.61.0",
+    "rollup-plugin-babel": "^3.0.5",
     "rollup-plugin-commonjs": "^9.1.0",
@@ -125,0 +125,0 @@ "rollup-plugin-node-resolve": "^3.3.0",

README.md

@@ -38,5 +38,5 @@ # react-intersection-observer <sup>[![Version Badge][npm-version-svg]][package-url]</sup>
 
-The easiest way to use the `Observer`, is to pass a function as the child. It
-will be called whenever the state changes, with the new value of `inView`.
-By default it will render inside a `<div>`, but you can change the element by setting `tag` to the HTMLElement you need.
+To use the `Observer`, you pass it a function. It will be called whenever the state changes, with the new value of `inView`.
+In addition to the `inView` prop, children also receives a `ref` that should be set on the containing DOM element.
+This is the element that the IntersectionObserver will monitor.
 
@@ -48,20 +48,3 @@ ```js
   <Observer>
-    {inView => <h2>{`Header inside viewport ${inView}.`}</h2>}
-  </Observer>
-)
-
-export default Component
-```
-
-### Render prop
-
-Using the render prop you can get full control over the output.
-In addition to the `inView` prop, the render also receives a `ref` that should be set on the containing DOM element.
-
-```js
-import Observer from 'react-intersection-observer'
-
-const Component = () => (
-  <Observer
-    render={({ inView, ref }) => (
+    {({ inView, ref }) => (
       <div ref={ref}>
@@ -71,19 +54,2 @@ <h2>{`Header inside viewport ${inView}.`}</h2>
     )}
-  />
-)
-
-export default Component
-```
-
-### OnChange callback
-
-You can monitor the onChange method, and control the state in your own
-component. This works with plain children, child as function or render props.
-
-```js
-import Observer from 'react-intersection-observer'
-
-const Component = () => (
-  <Observer onChange={inView => console.log('Inview:', inView)}>
-    <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
   </Observer>
@@ -101,11 +67,9 @@ )
 | --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **children**    | Func/Node               |         | false    | Children should be either a function or a node                                                                                                                                                                                   |
-| **render**      | ({inView, ref}) => Node |         | false    | Render prop allowing you to control the view.                                                                                                                                                                                    |
+| **children**    | ({inView, ref}) => Node |         | true     | Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root.                                                                                           |
+| **onChange**    | (inView) => void        |         | false    | Call this function whenever the in view state changes                                                                                                                                                                            |
 | **root**        | HTMLElement             |         | false    | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.                                                                                |
 | **rootId**      | String                  |         | false    | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. |
 | **rootMargin**  | String                  | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                               |
-| **tag**         | String                  | 'div'   | false    | Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div'                                                                                                                                   |
 | **threshold**   | Number                  | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                               |
 | **triggerOnce** | Bool                    | false   | false    | Only trigger this method once                                                                                                                                                                                                    |
-| **onChange**    | Func                    |         | false    | Call this function whenever the in view state changes                                                                                                                                                                            |
 
@@ -112,0 +76,0 @@ ## Usage in other projects

src/index.js

@@ -7,9 +7,8 @@ // @flow
 type Props = {
-  /** Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div' */
-  tag: string,
-  /** Only trigger the inView callback once */
-  triggerOnce: boolean,
-  /** Children should be either a function or a node */
-  children?: ((inView: boolean) => React.Node) | React.Node,
-  /** Render prop boolean indicating inView state */
+  /** Children expects a function that recieves an object contain an `inView` boolean and `ref` that should be assigned to the element root. */
+  children?: ({
+    inView: boolean,
+    ref: (node: ?HTMLElement) => void,
+  }) => React.Node,
+  /** @deprecated replace render with children */
   render?: ({
@@ -19,4 +18,8 @@ inView: boolean,
   }) => React.Node,
+  /** @deprecated */
+  tag?: string,
   /** Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. */
   threshold?: number | Array<number>,
+  /** Only trigger the inView callback once */
+  triggerOnce: boolean,
   /** The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null.*/
@@ -41,4 +44,4 @@ root?: HTMLElement,
  <Observer>
- {inView => (
-   <h1>{`${inView}`}</h1>
+ {({inView, ref}) => (
+   <h1 ref={ref}>{`${inView}`}</h1>
  )}
@@ -49,3 +52,2 @@ </Observer>
   static defaultProps = {
-    tag: 'div',
     threshold: 0,
@@ -60,6 +62,17 @@ triggerOnce: false,
   componentDidMount() {
-    if (typeof this.props.render === 'function') {
+    if (process.env.NODE_ENV !== 'production') {
+      if (this.props.hasOwnProperty('render')) {
+        console.warn(
+          `react-intersection-observer: "render" is deprecated, and should be replaced with "children"`,
+          this.node,
+        )
+      } else if (typeof this.props.children !== 'function') {
+        console.warn(
+          `react-intersection-observer: plain "children" is deprecated. You should convert it to a function that handles the "ref" manually.`,
+          this.node,
+        )
+      }
       invariant(
         this.node,
-        `react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe, when using render prop.`,
+        `react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.`,
       )
@@ -139,16 +152,12 @@ }
     const { inView } = this.state
+    const renderMethod = children || render
 
-    if (typeof render === 'function') {
-      return render({ inView, ref: this.handleNode })
+    if (typeof renderMethod === 'function') {
+      return renderMethod({ inView, ref: this.handleNode })
     }
 
     return React.createElement(
-      tag,
-      {
-        ...props,
-        ref: this.handleNode,
-      },
-      // If children is a function, render it with the current inView status.
-      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-      typeof children === 'function' ? children(inView) : children,
+      tag || 'div',
+      { ref: this.handleNode, ...props },
+      children,
     )
@@ -155,0 +164,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

58058

decreased by-2.17%

Number of lines in readme file

154

decreased by-18.95%

Number of low supply chain risk alerts

3

increased byInfinity%

No dependency changes