react-scroll-percentage - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/index.js

@@ -60,16 +60,13 @@ 'use strict';
       inView: false
-    }, _this.observer = null, _this.handleInView = function (inView) {
+    }, _this.node = null, _this.handleInView = function (inView) {
       _this.setState({ inView: inView });
-    }, _this.handleNode = function (node) {
-      return _this.observer = node;
+    }, _this.handleNode = function (observer) {
+      return _this.node = observer && observer.node;
     }, _this.handleScroll = function () {
-      if (!_this.observer || !_this.observer.node) return;
+      if (!_this.node) return;
       var threshold = _this.props.threshold;
 
-      var _this$observer$node$g = _this.observer.node.getBoundingClientRect(),
-          bottom = _this$observer$node$g.bottom,
-          height = _this$observer$node$g.height;
+      var bounds = _this.node.getBoundingClientRect();
+      var percentage = ScrollPercentage.calculatePercentage(bounds, threshold);
 
-      var percentage = ScrollPercentage.calculatePercentage(height, bottom, threshold);
-
       if (percentage !== _this.state.percentage) {
@@ -84,2 +81,8 @@ _this.setState({
   _createClass(ScrollPercentage, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // Start by updating the scroll position, so it correctly reflects the elements start position
+      this.handleScroll();
+    }
+  }, {
     key: 'componentWillUpdate',
@@ -93,8 +96,2 @@ value: function componentWillUpdate(nextProps, nextState) {
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      // Start by updating the scroll position, so it correctly reflects the elements start position
-      this.handleScroll();
-    }
-  }, {
     key: 'componentDidUpdate',
@@ -110,3 +107,2 @@ value: function componentDidUpdate(prevProps, prevState) {
       this.monitorScroll(false);
-      this.observer = null;
     }
@@ -149,4 +145,4 @@ }, {
     key: 'calculatePercentage',
-    value: function calculatePercentage(height, bottom) {
-      var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    value: function calculatePercentage(bounds) {
+      var threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
@@ -157,3 +153,3 @@ var vh = ScrollPercentage.viewportHeight();
 
-      return 1 - Math.max(0, Math.min(1, (bottom - offsetTop) / (vh + height - offsetBottom - offsetTop)));
+      return 1 - Math.max(0, Math.min(1, (bounds.bottom - offsetTop) / (vh + bounds.height - offsetBottom - offsetTop)));
     }
@@ -160,0 +156,0 @@ }]);

package.json

 {
   "name": "react-scroll-percentage",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Monitor the scroll percentage of a component inside the viewport, using the IntersectionObserver API.",
@@ -60,3 +60,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "react-intersection-observer": "^2.0.0"
+    "react-intersection-observer": "^3.0.1"
   },
@@ -67,9 +67,9 @@ "peerDependencies": {
   "devDependencies": {
-    "@storybook/addon-actions": "^3.2.6",
-    "@storybook/addon-options": "^3.2.6",
-    "@storybook/react": "^3.2.8",
+    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-options": "^3.3.3",
+    "@storybook/react": "^3.3.3",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.0.0",
+    "babel-eslint": "^8.1.2",
+    "babel-jest": "^22.0.4",
     "babel-preset-env": "^1.6.0",
@@ -79,14 +79,14 @@ "babel-preset-react": "^6.24.1",
     "concurrently": "^3.5.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
-    "enzyme-to-json": "^3.2.2",
-    "eslint": "^4.6.1",
-    "eslint-config-insilico": "^5.0.0",
-    "flow-bin": "^0.59.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.0",
+    "eslint": "^4.14.0",
+    "eslint-config-insilico": "^5.1.0",
+    "flow-bin": "^0.62.0",
     "flow-copy-source": "^1.2.1",
     "husky": "^0.14.3",
-    "intersection-observer": "^0.4.2",
-    "jest": "^21.0.1",
-    "lint-staged": "^5.0.0",
-    "prettier": "^1.6.1",
+    "intersection-observer": "^0.5.0",
+    "jest": "^22.0.4",
+    "lint-staged": "^6.0.0",
+    "prettier": "^1.9.2",
     "react": "^16.0.0",
@@ -93,0 +93,0 @@ "react-dom": "^16.0.0",

README.md

@@ -9,5 +9,5 @@ # react-scroll-percentage
 React component that reports the current scroll percentage of a element inside
-the viewport. It uses
-[React Intersection Observer](https://github.com/thebuilder/react-intersection-observer)
-to only report the percentage when the element is inside the viewport.
+the viewport. It uses [React Intersection
+Observer](https://github.com/thebuilder/react-intersection-observer) to only
+report the percentage when the element is inside the viewport.
 
@@ -46,4 +46,4 @@ ```js
 
-The component requires the
-[intersection-observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+The component requires the [intersection-observer
+API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
 to be available on the global namespace. At the moment you should include a
@@ -67,6 +67,5 @@ polyfill to ensure support in all browsers.
 
-If you are using Webpack (or similar) you could use
-[dynamic imports](https://webpack.js.org/api/module-methods/#import-), to load
-the Polyfill only if needed. A basic implementation could look something like
-this:
+If you are using Webpack (or similar) you could use [dynamic
+imports](https://webpack.js.org/api/module-methods/#import-), to load the
+Polyfill only if needed. A basic implementation could look something like this:
 
@@ -110,8 +109,9 @@ ```js
 
-| Name      | Type      | Default | Required | Description                                                                                   |
-| --------- | --------- | ------- | -------- | --------------------------------------------------------------------------------------------- |
-| tag       | Node      |         | false    | Element tag to use for the wrapping component                                                 |
-| children  | func/node |         | false    | Children should be either a function or a node                                                |
-| threshold | Number    | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering |
-| onChange  | Func      |         | false    | Call this function whenever the in view state changes                                         |
+| Name      | Type                                            | Default | Required | Description                                                                                   |
+| --------- | ----------------------------------------------- | ------- | -------- | --------------------------------------------------------------------------------------------- |
+| tag       | Node                                            | 'div'   | true     | Element tag to use for the wrapping component                                                 |
+| children  | ((percentage: number, inView: boolean) => Node) |         | true     | Children should be either a function or a node                                                |
+| threshold | Number                                          | 0       | false    | Number between 0 and 1 indicating the the percentage that should be visible before triggering |
+| onChange  | (percentage: number, inView: boolean) => void   |         | false    | Call this function whenever the in view state changes                                         |
+| innerRef  | (element: ?HTMLElement) => void                 |         | false    | Get a reference to the the inner DOM node                                                     |
 
@@ -118,0 +118,0 @@ ## Example code

src/index.js

@@ -15,2 +15,4 @@ // @flow
   threshold?: number,
+  /** Get a reference to the the inner DOM node */
+  innerRef?: (element: ?HTMLElement) => void,
 }
@@ -46,4 +48,3 @@
   static calculatePercentage(
-    height: number,
-    bottom: number,
+    bounds: ClientRect,
     threshold: number = 0,
@@ -61,3 +62,4 @@ ): number {
           1,
-          (bottom - offsetTop) / (vh + height - offsetBottom - offsetTop),
+          (bounds.bottom - offsetTop) /
+            (vh + bounds.height - offsetBottom - offsetTop),
         ),
@@ -73,2 +75,7 @@ )
 
+  componentDidMount() {
+    // Start by updating the scroll position, so it correctly reflects the elements start position
+    this.handleScroll()
+  }
+
   componentWillUpdate(nextProps: Props, nextState: State) {
@@ -84,7 +91,2 @@ if (!nextProps.onChange) return
 
-  componentDidMount() {
-    // Start by updating the scroll position, so it correctly reflects the elements start position
-    this.handleScroll()
-  }
-
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -98,6 +100,5 @@ if (prevState.inView !== this.state.inView) {
     this.monitorScroll(false)
-    this.observer = null
   }
 
-  observer: ?Observer = null
+  node: ?HTMLElement = null
 
@@ -116,13 +117,9 @@ monitorScroll(enable: boolean) {
 
-  handleNode = (node: ?Observer) => (this.observer = node)
+  handleNode = (observer: ?Observer) => (this.node = observer && observer.node)
 
   handleScroll = () => {
-    if (!this.observer || !this.observer.node) return
+    if (!this.node) return
     const { threshold } = this.props
-    const { bottom, height } = this.observer.node.getBoundingClientRect()
-    const percentage = ScrollPercentage.calculatePercentage(
-      height,
-      bottom,
-      threshold,
-    )
+    const bounds = this.node.getBoundingClientRect()
+    const percentage = ScrollPercentage.calculatePercentage(bounds, threshold)
 
@@ -129,0 +126,0 @@ if (percentage !== this.state.percentage) {

No alert changes

Worsened metrics

Total package byte prevSize

27697

decreased by-90.36%

Number of package files

17

decreased by-5.56%

Lines of code

348

decreased by-1.69%

Dependency changes

• + Addedreact-intersection-observer@3.0.3(transitive)

• - Removedreact-intersection-observer@2.1.2(transitive)

• Updatedreact-intersection-observer@^3.0.1