react-peekaboo - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.d.ts

@@ -10,6 +10,8 @@ import { Component } from 'react';
         offsetBottom: number;
+        offsetLeft: number;
+        offsetRight: number;
         offsetTop: number;
         throttle: number;
     };
-    render(): import("react").ComponentElement<Props, Scroll> | import("react").ComponentElement<Pick<Props, "enabled" | "children" | "offsetBottom" | "offsetTop" | "onChange">, IO>;
+    render(): import("react").ComponentElement<Props, Scroll> | import("react").ComponentElement<Pick<Props, "enabled" | "children" | "offsetBottom" | "offsetLeft" | "offsetRight" | "offsetTop" | "onChange">, IO>;
 }

dist/index.esm.js

@@ -13,2 +13,4 @@ import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
   offsetBottom: 0,
+  offsetLeft: 0,
+  offsetRight: 0,
   offsetTop: 0,
@@ -29,5 +31,7 @@ throttle: 100
       offsetBottom = _ref.offsetBottom,
+      offsetLeft = _ref.offsetLeft,
+      offsetRight = _ref.offsetRight,
       offsetTop = _ref.offsetTop,
       onChange = _ref.onChange;
-  var rootMargin = "".concat(offsetBottom, "px 0px ").concat(offsetTop, "px 0px");
+  var rootMargin = "".concat(offsetBottom, "px ").concat(offsetLeft, "px ").concat(offsetTop, "px ").concat(offsetRight, "px");
   var observer = new IntersectionObserver(function (_ref2) {
@@ -52,3 +56,8 @@ var _ref3 = _slicedToArray(_ref2, 1),
 
-function isElementInViewport(element, offsetBottom, offsetTop) {
+function isElementIntersecting(element, _ref4) {
+  var offsetBottom = _ref4.offsetBottom,
+      offsetLeft = _ref4.offsetLeft,
+      offsetRight = _ref4.offsetRight,
+      offsetTop = _ref4.offsetTop;
+
   if (!isElementInDocument(element)) {
@@ -59,22 +68,26 @@ return false;
   var rect = element.getBoundingClientRect();
-  var top = rect.top;
-  var bottom = rect.bottom;
-  var adjustedTop = top - offsetTop;
-  var adjustedBottom = bottom + offsetBottom;
-  var isTopEdgeAboveViewportBottom = adjustedTop <= window.innerHeight;
-  var isBottomEdgeBelowViewportTop = adjustedBottom >= 0;
-  var isIntersecting = isTopEdgeAboveViewportBottom && isBottomEdgeBelowViewportTop;
-  return isIntersecting;
+  var adjustedBottom = rect.bottom + offsetBottom;
+  var adjustedLeft = rect.left - offsetLeft;
+  var adjustedRight = rect.right + offsetRight;
+  var adjustedTop = rect.top - offsetTop;
+  return adjustedBottom >= 0 && adjustedLeft <= window.innerWidth && adjustedRight >= 0 && adjustedTop <= window.innerHeight;
 }
 
-function scroll(_ref4) {
-  var element = _ref4.element,
-      offsetBottom = _ref4.offsetBottom,
-      offsetTop = _ref4.offsetTop,
-      onChange = _ref4.onChange,
-      throttle = _ref4.throttle;
+function scroll(_ref5) {
+  var element = _ref5.element,
+      offsetBottom = _ref5.offsetBottom,
+      offsetLeft = _ref5.offsetLeft,
+      offsetRight = _ref5.offsetRight,
+      offsetTop = _ref5.offsetTop,
+      onChange = _ref5.onChange,
+      throttle = _ref5.throttle;
   var prevInViewport;
 
   var checkViewport = function checkViewport() {
-    var isInViewport = element ? isElementInViewport(element, offsetBottom, offsetTop) : false;
+    var isInViewport = element ? isElementIntersecting(element, {
+      offsetBottom: offsetBottom,
+      offsetLeft: offsetLeft,
+      offsetRight: offsetRight,
+      offsetTop: offsetTop
+    }) : false;
 
@@ -124,2 +137,4 @@ if (isInViewport !== prevInViewport) {
             offsetBottom = _this$props.offsetBottom,
+            offsetLeft = _this$props.offsetLeft,
+            offsetRight = _this$props.offsetRight,
             offsetTop = _this$props.offsetTop,
@@ -130,2 +145,4 @@ onChange = _this$props.onChange;
           offsetBottom: offsetBottom,
+          offsetLeft: offsetLeft,
+          offsetRight: offsetRight,
           offsetTop: offsetTop,
@@ -151,3 +168,3 @@ onChange: onChange
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevState.element !== this.state.element) {
+      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetLeft !== this.props.offsetLeft || prevProps.offsetRight !== this.props.offsetRight || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevState.element !== this.state.element) {
         this.safeTeardown();
@@ -200,2 +217,4 @@ this.setup();
             offsetBottom = _this$props.offsetBottom,
+            offsetLeft = _this$props.offsetLeft,
+            offsetRight = _this$props.offsetRight,
             offsetTop = _this$props.offsetTop,
@@ -206,2 +225,4 @@ onChange = _this$props.onChange,
           offsetBottom: offsetBottom,
+          offsetLeft: offsetLeft,
+          offsetRight: offsetRight,
           offsetTop: offsetTop,
@@ -229,3 +250,3 @@ onChange: onChange,
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevProps.throttle !== this.props.throttle || prevState.element !== this.state.element) {
+      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetLeft !== this.props.offsetLeft || prevProps.offsetRight !== this.props.offsetRight || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevProps.throttle !== this.props.throttle || prevState.element !== this.state.element) {
         this.safeTeardown();
@@ -232,0 +253,0 @@ this.setup();

dist/index.js

@@ -19,2 +19,4 @@ 'use strict';
   offsetBottom: 0,
+  offsetLeft: 0,
+  offsetRight: 0,
   offsetTop: 0,
@@ -35,5 +37,7 @@ throttle: 100
       offsetBottom = _ref.offsetBottom,
+      offsetLeft = _ref.offsetLeft,
+      offsetRight = _ref.offsetRight,
       offsetTop = _ref.offsetTop,
       onChange = _ref.onChange;
-  var rootMargin = "".concat(offsetBottom, "px 0px ").concat(offsetTop, "px 0px");
+  var rootMargin = "".concat(offsetBottom, "px ").concat(offsetLeft, "px ").concat(offsetTop, "px ").concat(offsetRight, "px");
   var observer = new IntersectionObserver(function (_ref2) {
@@ -58,3 +62,8 @@ var _ref3 = _slicedToArray(_ref2, 1),
 
-function isElementInViewport(element, offsetBottom, offsetTop) {
+function isElementIntersecting(element, _ref4) {
+  var offsetBottom = _ref4.offsetBottom,
+      offsetLeft = _ref4.offsetLeft,
+      offsetRight = _ref4.offsetRight,
+      offsetTop = _ref4.offsetTop;
+
   if (!isElementInDocument(element)) {
@@ -65,22 +74,26 @@ return false;
   var rect = element.getBoundingClientRect();
-  var top = rect.top;
-  var bottom = rect.bottom;
-  var adjustedTop = top - offsetTop;
-  var adjustedBottom = bottom + offsetBottom;
-  var isTopEdgeAboveViewportBottom = adjustedTop <= window.innerHeight;
-  var isBottomEdgeBelowViewportTop = adjustedBottom >= 0;
-  var isIntersecting = isTopEdgeAboveViewportBottom && isBottomEdgeBelowViewportTop;
-  return isIntersecting;
+  var adjustedBottom = rect.bottom + offsetBottom;
+  var adjustedLeft = rect.left - offsetLeft;
+  var adjustedRight = rect.right + offsetRight;
+  var adjustedTop = rect.top - offsetTop;
+  return adjustedBottom >= 0 && adjustedLeft <= window.innerWidth && adjustedRight >= 0 && adjustedTop <= window.innerHeight;
 }
 
-function scroll(_ref4) {
-  var element = _ref4.element,
-      offsetBottom = _ref4.offsetBottom,
-      offsetTop = _ref4.offsetTop,
-      onChange = _ref4.onChange,
-      throttle = _ref4.throttle;
+function scroll(_ref5) {
+  var element = _ref5.element,
+      offsetBottom = _ref5.offsetBottom,
+      offsetLeft = _ref5.offsetLeft,
+      offsetRight = _ref5.offsetRight,
+      offsetTop = _ref5.offsetTop,
+      onChange = _ref5.onChange,
+      throttle = _ref5.throttle;
   var prevInViewport;
 
   var checkViewport = function checkViewport() {
-    var isInViewport = element ? isElementInViewport(element, offsetBottom, offsetTop) : false;
+    var isInViewport = element ? isElementIntersecting(element, {
+      offsetBottom: offsetBottom,
+      offsetLeft: offsetLeft,
+      offsetRight: offsetRight,
+      offsetTop: offsetTop
+    }) : false;
 
@@ -130,2 +143,4 @@ if (isInViewport !== prevInViewport) {
             offsetBottom = _this$props.offsetBottom,
+            offsetLeft = _this$props.offsetLeft,
+            offsetRight = _this$props.offsetRight,
             offsetTop = _this$props.offsetTop,
@@ -136,2 +151,4 @@ onChange = _this$props.onChange;
           offsetBottom: offsetBottom,
+          offsetLeft: offsetLeft,
+          offsetRight: offsetRight,
           offsetTop: offsetTop,
@@ -157,3 +174,3 @@ onChange: onChange
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevState.element !== this.state.element) {
+      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetLeft !== this.props.offsetLeft || prevProps.offsetRight !== this.props.offsetRight || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevState.element !== this.state.element) {
         this.safeTeardown();
@@ -206,2 +223,4 @@ this.setup();
             offsetBottom = _this$props.offsetBottom,
+            offsetLeft = _this$props.offsetLeft,
+            offsetRight = _this$props.offsetRight,
             offsetTop = _this$props.offsetTop,
@@ -212,2 +231,4 @@ onChange = _this$props.onChange,
           offsetBottom: offsetBottom,
+          offsetLeft: offsetLeft,
+          offsetRight: offsetRight,
           offsetTop: offsetTop,
@@ -235,3 +256,3 @@ onChange: onChange,
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevProps.throttle !== this.props.throttle || prevState.element !== this.state.element) {
+      if (prevProps.children !== this.props.children || prevProps.enabled !== this.props.enabled || prevProps.offsetBottom !== this.props.offsetBottom || prevProps.offsetLeft !== this.props.offsetLeft || prevProps.offsetRight !== this.props.offsetRight || prevProps.offsetTop !== this.props.offsetTop || prevProps.onChange !== this.props.onChange || prevProps.throttle !== this.props.throttle || prevState.element !== this.state.element) {
         this.safeTeardown();
@@ -238,0 +259,0 @@ this.setup();

dist/IO.d.ts

@@ -12,2 +12,4 @@ import { Component } from 'react';
         offsetBottom: number;
+        offsetLeft: number;
+        offsetRight: number;
         offsetTop: number;
@@ -14,0 +16,0 @@ throttle: number;

dist/peekaboo.d.ts

@@ -6,2 +6,4 @@ export declare function intersectionObserverSupported(): boolean;
     offsetBottom: number;
+    offsetLeft: number;
+    offsetRight: number;
     offsetTop: number;
@@ -13,3 +15,3 @@ onChange: (isInviewPort: boolean) => void;
 };
-export declare function io({ element, offsetBottom, offsetTop, onChange, }: IOProps): TeardownFunc;
-export declare function scroll({ element, offsetBottom, offsetTop, onChange, throttle, }: ScrollProps): TeardownFunc;
+export declare function io({ element, offsetBottom, offsetLeft, offsetRight, offsetTop, onChange, }: IOProps): TeardownFunc;
+export declare function scroll({ element, offsetBottom, offsetLeft, offsetRight, offsetTop, onChange, throttle, }: ScrollProps): TeardownFunc;

dist/Scroll.d.ts

@@ -12,2 +12,4 @@ import { Component } from 'react';
         offsetBottom: number;
+        offsetLeft: number;
+        offsetRight: number;
         offsetTop: number;
@@ -14,0 +16,0 @@ throttle: number;

dist/types.d.ts

@@ -7,2 +7,4 @@ import { ReactNode, Ref as ReactRef } from 'react';
     offsetBottom: number;
+    offsetLeft: number;
+    offsetRight: number;
     offsetTop: number;
@@ -9,0 +11,0 @@ throttle: number;

package.json

 {
   "name": "react-peekaboo",
   "description": "React component that notifies when its child enters or exits the viewport",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "Wyatt Johnston <[e-mail]>",

README.md

@@ -65,2 +65,16 @@ # `react-peekaboo`
 
+##### `offsetLeft?: number`
+
+Number of pixels to add to the left of the area checked against when computing
+in view elements.
+
+Default: `0`
+
+##### `offsetRight?: number`
+
+Number of pixels to add to the right of the area checked against when computing
+in view elements.
+
+Default: `0`
+
 ##### `offsetTop?: number`
@@ -107,2 +121,16 @@
 
+##### `offsetLeft?: number`
+
+Number of pixels to add to the left of the area checked against when computing
+in view elements.
+
+Default: `0`
+
+##### `offsetRight?: number`
+
+Number of pixels to add to the right of the area checked against when computing
+in view elements.
+
+Default: `0`
+
 ##### `offsetTop?: number`
@@ -140,2 +168,16 @@
 
+##### `offsetLeft?: number`
+
+Number of pixels to add to the left of the area checked against when computing
+in view elements.
+
+Default: `0`
+
+##### `offsetRight?: number`
+
+Number of pixels to add to the right of the area checked against when computing
+in view elements.
+
+Default: `0`
+
 ##### `offsetTop?: number`
@@ -162,8 +204,8 @@
 - This module considers edge-adjacent intersections (when the target element is
-  directly above or below the viewport) to be in viewport. If you only want to
-  consider elements with pixels in the viewport as visible, you can configure
-  `offsetTop`/`offsetBottom` to be `-1`.
+  directly above/below/beside the viewport) to be in viewport. If you only want
+  to consider elements with pixels in the viewport as visible, you can configure
+  `offsetBottom`/`offsetLeft`/`offsetRight`/`offsetTop` to be `-1`.
 - IntersectionObserver ignores `rootMargin` in iframe contexts, which means that
-  `offsetTop` and `offsetBottom` will be ignored.
+  offsets will be ignored.
   - https://w3c.github.io/IntersectionObserver/#dom-intersectionobserver-rootmargin
   - https://developers.google.com/web/updates/2016/04/intersectionobserver#iframe_magic

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

28383

increased by12.39%

Lines of code

597

increased by9.14%

Number of lines in readme file

208

increased by25.3%

No dependency changes