react-intersection-observer - npm Package Compare versions

Comparing version 6.3.1 to 6.4.0

dist/react-intersection-observer.cjs.js

@@ -136,3 +136,3 @@ 'use strict';
       instance.visible = _inView;
-      instance.callback(_inView);
+      instance.callback(_inView, intersectionRatio);
     }
@@ -142,2 +142,36 @@ });
 
+function useInView(ref, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  // $FlowFixMe - useState is not exposed in React Flow lib yet
+  var _React$useState = React.useState(false),
+      isInView = _React$useState[0],
+      setInView = _React$useState[1]; // $FlowFixMe - useEffect is not exposed in React Flow lib yet
+
+
+  React.useEffect(function () {
+    if (ref.current) {
+      observe(ref.current, function (inView) {
+        setInView(inView);
+
+        if (inView && options.triggerOnce) {
+          // If it should only trigger once, unobserve the element after it's inView
+          unobserve(ref.current);
+        }
+      }, {
+        threshold: options.threshold,
+        root: options.root,
+        rootMargin: options.rootMargin
+      }, options.rootId);
+    }
+
+    return function () {
+      unobserve(ref.current);
+    };
+  }, [options.threshold, options.root, options.rootMargin, options.rootId]);
+  return isInView;
+}
+
 /**
@@ -167,3 +201,4 @@ * Monitors scroll, and triggers the children function with updated props
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
-      inView: false
+      inView: false,
+      intersectionRatio: 0
     });
@@ -180,9 +215,10 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (inView) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (inView, intersectionRatio) {
       _this.setState({
-        inView: inView
+        inView: inView,
+        intersectionRatio: intersectionRatio
       });
 
       if (_this.props.onChange) {
-        _this.props.onChange(inView);
+        _this.props.onChange(inView, intersectionRatio);
       }
@@ -254,3 +290,5 @@ });
 
-    var inView = this.state.inView;
+    var _this$state = this.state,
+        inView = _this$state.inView,
+        intersectionRatio = _this$state.intersectionRatio;
     var renderMethod = children || render;
@@ -261,2 +299,3 @@
         inView: inView,
+        intersectionRatio: intersectionRatio,
         ref: this.handleNode
@@ -279,38 +318,4 @@ });
 
-function useInView(ref, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  // $FlowFixMe - useState is not exposed in React Flow lib yet
-  var _React$useState = React.useState(false),
-      isInView = _React$useState[0],
-      setInView = _React$useState[1]; // $FlowFixMe - useEffect is not exposed in React Flow lib yet
-
-
-  React.useEffect(function () {
-    if (ref.current) {
-      observe(ref.current, function (inView) {
-        setInView(inView);
-
-        if (inView && options.triggerOnce) {
-          // If it should only trigger once, unobserve the element after it's inView
-          unobserve(ref.current);
-        }
-      }, {
-        threshold: options.threshold,
-        root: options.root,
-        rootMargin: options.rootMargin
-      }, options.rootId);
-    }
-
-    return function () {
-      unobserve(ref.current);
-    };
-  }, [options.threshold, options.root, options.rootMargin, options.rootId]);
-  return isInView;
-}
-
 exports.InView = InView;
+exports.default = InView;
 exports.useInView = useInView;
-exports.default = InView;

dist/react-intersection-observer.esm.js

@@ -6,3 +6,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { createElement, Component, useState, useEffect } from 'react';
+import { useState, useEffect, createElement, Component } from 'react';
 import invariant from 'invariant';
@@ -131,3 +131,3 @@
       instance.visible = _inView;
-      instance.callback(_inView);
+      instance.callback(_inView, intersectionRatio);
     }
@@ -137,2 +137,36 @@ });
 
+function useInView(ref, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  // $FlowFixMe - useState is not exposed in React Flow lib yet
+  var _React$useState = useState(false),
+      isInView = _React$useState[0],
+      setInView = _React$useState[1]; // $FlowFixMe - useEffect is not exposed in React Flow lib yet
+
+
+  useEffect(function () {
+    if (ref.current) {
+      observe(ref.current, function (inView) {
+        setInView(inView);
+
+        if (inView && options.triggerOnce) {
+          // If it should only trigger once, unobserve the element after it's inView
+          unobserve(ref.current);
+        }
+      }, {
+        threshold: options.threshold,
+        root: options.root,
+        rootMargin: options.rootMargin
+      }, options.rootId);
+    }
+
+    return function () {
+      unobserve(ref.current);
+    };
+  }, [options.threshold, options.root, options.rootMargin, options.rootId]);
+  return isInView;
+}
+
 /**
@@ -162,3 +196,4 @@ * Monitors scroll, and triggers the children function with updated props
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
-      inView: false
+      inView: false,
+      intersectionRatio: 0
     });
@@ -175,9 +210,10 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (inView) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (inView, intersectionRatio) {
       _this.setState({
-        inView: inView
+        inView: inView,
+        intersectionRatio: intersectionRatio
       });
 
       if (_this.props.onChange) {
-        _this.props.onChange(inView);
+        _this.props.onChange(inView, intersectionRatio);
       }
@@ -249,3 +285,5 @@ });
 
-    var inView = this.state.inView;
+    var _this$state = this.state,
+        inView = _this$state.inView,
+        intersectionRatio = _this$state.intersectionRatio;
     var renderMethod = children || render;
@@ -256,2 +294,3 @@
         inView: inView,
+        intersectionRatio: intersectionRatio,
         ref: this.handleNode
@@ -274,37 +313,3 @@ });
 
-function useInView(ref, options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  // $FlowFixMe - useState is not exposed in React Flow lib yet
-  var _React$useState = useState(false),
-      isInView = _React$useState[0],
-      setInView = _React$useState[1]; // $FlowFixMe - useEffect is not exposed in React Flow lib yet
-
-
-  useEffect(function () {
-    if (ref.current) {
-      observe(ref.current, function (inView) {
-        setInView(inView);
-
-        if (inView && options.triggerOnce) {
-          // If it should only trigger once, unobserve the element after it's inView
-          unobserve(ref.current);
-        }
-      }, {
-        threshold: options.threshold,
-        root: options.root,
-        rootMargin: options.rootMargin
-      }, options.rootId);
-    }
-
-    return function () {
-      unobserve(ref.current);
-    };
-  }, [options.threshold, options.root, options.rootMargin, options.rootId]);
-  return isInView;
-}
-
 export default InView;
 export { InView, useInView };

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

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r(e.ReactIntersectionObserver={},e.React)}(this,function(e,a){"use strict";function d(){return(d=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var u=process.env.NODE_ENV,l=function(e,r,t,o,n,i,s,a){if("production"!==u&&void 0===r)throw new Error("invariant requires an error message argument");if(!e){var d;if(void 0===r)d=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,o,n,i,s,a],h=0;(d=new Error(r.replace(/%s/g,function(){return c[h++]}))).name="Invariant Violation"}throw d.framesToPop=1,d}},f=new Map,p=new Map;function c(e,r,t,o){void 0===t&&(t={}),l(!f.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e),t.threshold||(t.threshold=0);var n=t,i=n.root,s=n.rootMargin,a=n.threshold;if(e&&r){var d=s?a.toString()+"_"+s:a.toString();i&&(d=o?o+"_"+d:null);var c=d?p.get(d):null;c||(c=new IntersectionObserver(v,t),d&&p.set(d,c));var h={callback:r,visible:!1,options:t,observerId:d,observer:d?void 0:c};return f.set(e,h),c.observe(e),h}}function h(t){if(t){var e=f.get(t);if(e){var o=e.observerId,r=e.observer,n=o?p.get(o):r;n&&n.unobserve(t);var i=!1;o&&f.forEach(function(e,r){e&&e.observerId===o&&r!==t&&(i=!0)}),n&&!i&&(n.disconnect(),p.delete(o)),f.delete(t)}}}function v(e){e.forEach(function(e){var r=e.isIntersecting,t=e.intersectionRatio,o=e.target,n=f.get(o);if(n&&0<=t){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<t:e<=t}):void 0!==i.threshold&&(s=n.visible?t>i.threshold:t>=i.threshold),void 0!==r&&(s=s&&r),n.visible=s,n.callback(s)}})}var r=function(n){var e,r;function t(){for(var r,e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return s(i(i(r=n.call.apply(n,[this].concat(t))||this)),"state",{inView:!1}),s(i(i(r)),"node",null),s(i(i(r)),"handleNode",function(e){r.node&&h(r.node),r.node=e,r.observeNode()}),s(i(i(r)),"handleChange",function(e){r.setState({inView:e}),r.props.onChange&&r.props.onChange(e)}),r}r=n,(e=t).prototype=Object.create(r.prototype),(e.prototype.constructor=e).__proto__=r;var o=t.prototype;return o.componentDidMount=function(){"production"!==process.env.NODE_ENV&&(this.props.hasOwnProperty("render")&&console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"',this.node),l(this.node,'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.'))},o.componentDidUpdate=function(e,r){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(h(this.node),this.observeNode()),r.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(h(this.node),this.node=null)},o.componentWillUnmount=function(){this.node&&(h(this.node),this.node=null)},o.observeNode=function(){if(this.node){var e=this.props,r=e.threshold,t=e.root,o=e.rootMargin,n=e.rootId;c(this.node,this.handleChange,{threshold:r,root:t,rootMargin:o},n)}},o.render=function(){var e=this.props,r=e.children,t=e.render,o=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],0<=r.indexOf(t)||(n[t]=e[t]);return n}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state.inView,s=r||t;return"function"==typeof s?s({inView:i,ref:this.handleNode}):a.createElement(o||"div",d({ref:this.handleNode},n),r)},t}(a.Component);s(r,"defaultProps",{threshold:0,triggerOnce:!1}),e.InView=r,e.useInView=function(r,t){void 0===t&&(t={});var e=a.useState(!1),o=e[0],n=e[1];return a.useEffect(function(){return r.current&&c(r.current,function(e){n(e),e&&t.triggerOnce&&h(r.current)},{threshold:t.threshold,root:t.root,rootMargin:t.rootMargin},t.rootId),function(){h(r.current)}},[t.threshold,t.root,t.rootMargin,t.rootId]),o},e.default=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((e=e||self).ReactIntersectionObserver={},e.React)}(this,function(e,c){"use strict";function h(){return(h=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function i(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}var u=process.env.NODE_ENV,l=function(e,r,t,o,n,i,s,a){if("production"!==u&&void 0===r)throw new Error("invariant requires an error message argument");if(!e){var d;if(void 0===r)d=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,o,n,i,s,a],h=0;(d=new Error(r.replace(/%s/g,function(){return c[h++]}))).name="Invariant Violation"}throw d.framesToPop=1,d}},f=new Map,p=new Map;function a(e,r,t,o){void 0===t&&(t={}),l(!f.has(e),"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s",e),t.threshold||(t.threshold=0);var n=t,i=n.root,s=n.rootMargin,a=n.threshold;if(e&&r){var d=s?a.toString()+"_"+s:a.toString();i&&(d=o?o+"_"+d:null);var c=d?p.get(d):null;c||(c=new IntersectionObserver(v,t),d&&p.set(d,c));var h={callback:r,visible:!1,options:t,observerId:d,observer:d?void 0:c};return f.set(e,h),c.observe(e),h}}function d(t){if(t){var e=f.get(t);if(e){var o=e.observerId,r=e.observer,n=o?p.get(o):r;n&&n.unobserve(t);var i=!1;o&&f.forEach(function(e,r){e&&e.observerId===o&&r!==t&&(i=!0)}),n&&!i&&(n.disconnect(),p.delete(o)),f.delete(t)}}}function v(e){e.forEach(function(e){var r=e.isIntersecting,t=e.intersectionRatio,o=e.target,n=f.get(o);if(n&&0<=t){var i=n.options,s=!1;Array.isArray(i.threshold)?s=i.threshold.some(function(e){return n.visible?e<t:e<=t}):void 0!==i.threshold&&(s=n.visible?t>i.threshold:t>=i.threshold),void 0!==r&&(s=s&&r),n.visible=s,n.callback(s,t)}})}var r=function(n){var e,r;function t(){for(var t,e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];return s(i(i(t=n.call.apply(n,[this].concat(r))||this)),"state",{inView:!1,intersectionRatio:0}),s(i(i(t)),"node",null),s(i(i(t)),"handleNode",function(e){t.node&&d(t.node),t.node=e,t.observeNode()}),s(i(i(t)),"handleChange",function(e,r){t.setState({inView:e,intersectionRatio:r}),t.props.onChange&&t.props.onChange(e,r)}),t}r=n,(e=t).prototype=Object.create(r.prototype),(e.prototype.constructor=e).__proto__=r;var o=t.prototype;return o.componentDidMount=function(){"production"!==process.env.NODE_ENV&&(this.props.hasOwnProperty("render")&&console.warn('react-intersection-observer: "render" is deprecated, and should be replaced with "children"',this.node),l(this.node,'react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.'))},o.componentDidUpdate=function(e,r){e.rootMargin===this.props.rootMargin&&e.root===this.props.root&&e.threshold===this.props.threshold||(d(this.node),this.observeNode()),r.inView!==this.state.inView&&this.state.inView&&this.props.triggerOnce&&(d(this.node),this.node=null)},o.componentWillUnmount=function(){this.node&&(d(this.node),this.node=null)},o.observeNode=function(){if(this.node){var e=this.props,r=e.threshold,t=e.root,o=e.rootMargin,n=e.rootId;a(this.node,this.handleChange,{threshold:r,root:t,rootMargin:o},n)}},o.render=function(){var e=this.props,r=e.children,t=e.render,o=e.tag,n=(e.triggerOnce,e.threshold,e.root,e.rootId,e.rootMargin,function(e,r){if(null==e)return{};var t,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)t=i[o],0<=r.indexOf(t)||(n[t]=e[t]);return n}(e,["children","render","tag","triggerOnce","threshold","root","rootId","rootMargin"])),i=this.state,s=i.inView,a=i.intersectionRatio,d=r||t;return"function"==typeof d?d({inView:s,intersectionRatio:a,ref:this.handleNode}):c.createElement(o||"div",h({ref:this.handleNode},n),r)},t}(c.Component);s(r,"defaultProps",{threshold:0,triggerOnce:!1}),e.InView=r,e.default=r,e.useInView=function(r,t){void 0===t&&(t={});var e=c.useState(!1),o=e[0],n=e[1];return c.useEffect(function(){return r.current&&a(r.current,function(e){n(e),e&&t.triggerOnce&&d(r.current)},{threshold:t.threshold,root:t.root,rootMargin:t.rootMargin},t.rootId),function(){d(r.current)}},[t.threshold,t.root,t.rootMargin,t.rootId]),o},Object.defineProperty(e,"__esModule",{value:!0})});

index.d.ts

@@ -5,2 +5,3 @@ import React = require('react')
   inView: boolean
+  intersectionRatio: number
   ref: React.RefObject<any>
@@ -61,3 +62,3 @@ }
   /** Call this function whenever the in view state changes */
-  onChange?: (inView: boolean) => void
+  onChange?: (inView: boolean, intersectionRatio: number) => void
 }
@@ -64,0 +65,0 @@

package.json

 {
   "name": "react-intersection-observer",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
@@ -42,7 +42,7 @@ "main": "dist/react-intersection-observer.cjs.js",
     "build": "rm -rf dist && yarn run build:lib && yarn run build:flow",
-    "build:lib": "rollup -c && git add .size-snapshot.json",
+    "build:lib": "rollup -c",
     "build:storybook": "build-storybook --output-dir example",
     "build:flow": "node scripts/create-flow",
     "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
-    "lint": "eslint {src,stories,tests}/**/*.js ",
+    "lint": "eslint {src,stories}/**/*.js ",
     "prepare": "yarn build",
@@ -73,3 +73,8 @@ "pretty": "prettier '**/*.{js,md,json,yml,html}' --write",
       "insilico"
-    ]
+    ],
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    }
   },
@@ -90,3 +95,3 @@ "jest": {
   "dependencies": {
-    "@babel/runtime": "^7.1.0",
+    "@babel/runtime": "^7.2.0",
     "invariant": "^2.2.4"
@@ -98,41 +103,41 @@ },
   "devDependencies": {
-    "@babel/cli": "^7.1.5",
-    "@babel/core": "^7.1.5",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.1.5",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/addon-actions": "^4.0.9",
-    "@storybook/addon-options": "^4.0.4",
-    "@storybook/react": "^4.0.9",
+    "@storybook/addon-actions": "^4.1.4",
+    "@storybook/addon-options": "^4.1.4",
+    "@storybook/react": "^4.1.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.4.2",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "concurrently": "4.1.0",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.3.4",
-    "eslint": "^5.9.0",
-    "eslint-config-insilico": "^5.2.0",
-    "flow-bin": "^0.87.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.12.0",
+    "eslint-config-insilico": "^6.0.0",
+    "flow-bin": "^0.89.0",
     "flow-copy-source": "^2.0.2",
-    "husky": "^1.1.3",
+    "husky": "^1.3.1",
     "intersection-observer": "^0.5.1",
     "jest": "^23.5.0",
-    "jest-dom": "^2.1.1",
+    "jest-dom": "^3.0.0",
     "lint-staged": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.15.2",
+    "prettier": "^1.15.3",
     "react": "^16.7.0-alpha",
     "react-dom": "^16.7.0-alpha",
     "react-test-renderer": "^16.7.0-alpha",
-    "rollup": "^0.67.1",
-    "rollup-plugin-babel": "^4.0.1",
+    "rollup": "^1.0.2",
+    "rollup-plugin-babel": "^4.2.0",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-size-snapshot": "^0.7.0",
     "rollup-plugin-uglify": "^6.0.0"
   }
 }

README.md

@@ -129,3 +129,3 @@ # react-intersection-observer
 | **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).                                                                                               |
-| **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.                                                               |
+| **threshold**   | Number      | 0       | false    | Number between 0 and 1 indicating 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                                                                                                                                                                                                    |
@@ -132,0 +132,0 @@

src/__tests__/hooks.test.js

 import React, { useRef } from 'react'
 import * as ReactDOM from 'react-dom'
-import { useInView } from '../index'
+import { useInView } from '../hooks/useInView'
 import { mount } from 'enzyme'
@@ -5,0 +5,0 @@ import { observe, unobserve } from '../intersection'

src/__tests__/intersection.test.js

@@ -124,3 +124,3 @@ import { observe, unobserve, destroy } from '../intersection'
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
@@ -143,3 +143,3 @@ })
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
@@ -163,7 +163,7 @@ })
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
 })
 
-it('should not ensure threshold is 0 if undefined', () => {
+it('should ensure threshold is 0 if undefined', () => {
   const cb = jest.fn()
@@ -182,3 +182,3 @@ const instance = observe(el, cb, { threshold: undefined })
 
-  expect(cb).toHaveBeenCalledWith(true)
+  expect(cb).toHaveBeenCalledWith(true, 0)
   expect(instance.visible).toBe(true)
@@ -202,3 +202,3 @@ })
 
-  expect(cb).toHaveBeenCalledWith(false)
+  expect(cb).toHaveBeenCalledWith(false, 0)
   expect(instance.visible).toBe(false)
@@ -205,0 +205,0 @@ })

src/__tests__/Observer.test.js

@@ -141,6 +141,6 @@ /* eslint-disable import/no-named-as-default-member */
   const wrapper = mount(<Observer onChange={onChange}>{plainChild}</Observer>)
-  wrapper.instance().handleChange(true)
-  expect(onChange).toHaveBeenLastCalledWith(true)
-  wrapper.instance().handleChange(false)
-  expect(onChange).toHaveBeenLastCalledWith(false)
+  wrapper.instance().handleChange(true, 1)
+  expect(onChange).toHaveBeenLastCalledWith(true, 1)
+  wrapper.instance().handleChange(false, 0)
+  expect(onChange).toHaveBeenLastCalledWith(false, 0)
 })
@@ -147,0 +147,0 @@

src/index.js

@@ -5,2 +5,3 @@ // @flow
 import invariant from 'invariant'
+export { useInView } from './hooks/useInView'
 
@@ -26,2 +27,3 @@ export type IntersectionOptions = {
         inView: boolean,
+        intersectionRatio?: number,
         ref: (node: ?HTMLElement) => void,
@@ -33,2 +35,3 @@ }) => React.Node)
     inView: boolean,
+    intersectionRatio?: number,
     ref: (node: ?HTMLElement) => void,
@@ -39,3 +42,3 @@ }) => React.Node,
   /** Call this function whenever the in view state changes */
-  onChange?: (inView: boolean) => void,
+  onChange?: (inView: boolean, intersectionRatio: number) => void,
 }
@@ -45,2 +48,3 @@
   inView: boolean,
+  intersectionRatio: number,
 }
@@ -65,2 +69,3 @@
     inView: false,
+    intersectionRatio: 0,
   }
@@ -132,6 +137,6 @@
 
-  handleChange = (inView: boolean) => {
-    this.setState({ inView })
+  handleChange = (inView: boolean, intersectionRatio: number) => {
+    this.setState({ inView, intersectionRatio })
     if (this.props.onChange) {
-      this.props.onChange(inView)
+      this.props.onChange(inView, intersectionRatio)
     }
@@ -153,7 +158,7 @@ }
 
-    const { inView } = this.state
+    const { inView, intersectionRatio } = this.state
     const renderMethod = children || render
 
     if (typeof renderMethod === 'function') {
-      return renderMethod({ inView, ref: this.handleNode })
+      return renderMethod({ inView, intersectionRatio, ref: this.handleNode })
     }
@@ -169,41 +174,2 @@
 
-export function useInView(
-  ref: React.ElementRef<*>,
-  options: IntersectionOptions = {},
-) {
-  // $FlowFixMe - useState is not exposed in React Flow lib yet
-  const [isInView, setInView] = React.useState(false)
-
-  // $FlowFixMe - useEffect is not exposed in React Flow lib yet
-  React.useEffect(
-    () => {
-      if (ref.current) {
-        observe(
-          ref.current,
-          inView => {
-            setInView(inView)
-            if (inView && options.triggerOnce) {
-              // If it should only trigger once, unobserve the element after it's inView
-              unobserve(ref.current)
-            }
-          },
-          {
-            threshold: options.threshold,
-            root: options.root,
-            rootMargin: options.rootMargin,
-          },
-          options.rootId,
-        )
-      }
-
-      return () => {
-        unobserve(ref.current)
-      }
-    },
-    [options.threshold, options.root, options.rootMargin, options.rootId],
-  )
-
-  return isInView
-}
-
 export default InView

src/intersection.js

 // @flow
 import invariant from 'invariant'
 
-type Callback = (inView: boolean) => void
+type Callback = (inView: boolean, intersectionRatio: number) => void
 
@@ -158,3 +158,3 @@ type Instance = {
       instance.visible = inView
-      instance.callback(inView)
+      instance.callback(inView, intersectionRatio)
     }
@@ -161,0 +161,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

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

Improved metrics

Total package byte prevSize

67316

increased by1.92%

Number of package files

16

increased by6.67%

Lines of code

1320

increased by1.54%

Dependency changes

• Updated@babel/runtime@^7.2.0