react-within-viewport - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-within-viewport",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Debounced React high order component to flag when it's container is inside the viewport.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/within-viewport.js

 import React, { Component } from 'react'
 import wrapDisplayName from 'recompose/wrapDisplayName'
+import shallowEqual from 'recompose/shallowEqual'
 import debounce from 'lodash.debounce'
@@ -36,6 +37,8 @@
     if (window && window.addEventListener) {
-      this.debouncedUpdate = debounce(this.updateState, wait)
-      window.addEventListener('resize', this.debouncedUpdate)
-      window.addEventListener('scroll', this.debouncedUpdate)
-      this.updateState()
+      this.debouncedUpdateResize = debounce(this.updateResize, wait)
+      this.debouncedUpdateScroll = debounce(this.updateScroll, wait)
+      window.addEventListener('resize', this.debouncedUpdateResize)
+      window.addEventListener('scroll', this.debouncedUpdateScroll)
+      this.updateResize()
+      this.updateScroll()
     }
@@ -46,8 +49,15 @@ }
     if (window && window.removeEventListener) {
-      window.removeEventListener('resize', this.debouncedUpdate)
-      window.removeEventListener('scroll', this.debouncedUpdate)
+      window.removeEventListener('resize', this.debouncedUpdateResize)
+      window.removeEventListener('scroll', this.debouncedUpdateScroll)
     }
   }
 
-  updateState = () => {
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      shallowEqual(this.props, nextProps) ||
+      shallowEqual(this.inViewport(this.state), this.inViewport(nextState))
+    )
+  }
+
+  updateResize = () => {
     const update = () => {
@@ -59,4 +69,2 @@ const elem = this.refs.withinViewportContainer
         containerHeight: getHeight(elem),
-        containerTopOffset: getTop(elem),
-        containerLeftOffset: getLeft(elem),
         windowWidth: getViewportWidth(window, document),
@@ -75,12 +83,30 @@ windowHeight: getViewportHeight(window, document),
 
-  inViewport = () => {
-    if (this.state.updated) {
+  updateScroll = () => {
+    const update = () => {
+      const elem = this.refs.withinViewportContainer
+
+      this.setState({
+        containerTopOffset: getTop(elem),
+        containerLeftOffset: getLeft(elem),
+        updated: true,
+      })
+    }
+
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(() => update())
+    } else {
+      update()
+    }
+  }
+
+  inViewport = (state = this.state) => {
+    if (state.updated) {
       return (
         (
-          this.state.containerTopOffset < 0 &&
-          (this.state.containerHeight + this.state.containerTopOffset) > 0
+          state.containerTopOffset < 0 &&
+          (state.containerHeight + state.containerTopOffset) > 0
         ) ||
         (
-          this.state.containerTopOffset >= 0 &&
-          this.state.containerTopOffset < this.state.windowHeight
+          state.containerTopOffset >= 0 &&
+          state.containerTopOffset < state.windowHeight
         )
@@ -90,8 +116,8 @@ ) &&
         (
-          this.state.containerLeftOffset < 0 &&
-          (this.state.containerWidth + this.state.containerLeftOffset) > 0
+          state.containerLeftOffset < 0 &&
+          (state.containerWidth + state.containerLeftOffset) > 0
         ) ||
         (
-          this.state.containerLeftOffset >= 0 &&
-          this.state.containerLeftOffset < this.state.windowWidth
+          state.containerLeftOffset >= 0 &&
+          state.containerLeftOffset < state.windowWidth
         )
@@ -98,0 +124,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

28528

increased by2.23%

Lines of code

423

increased by5.49%

No dependency changes