react-intersection-observer-hook - npm Package Compare versions

Comparing version 0.1.0-alpha.1 to 0.1.0-alpha.2

dist/index.d.ts

@@ -1,6 +0,3 @@
-declare type IntersectionObserverHookRefCallbackNode = Element | null;
-declare type IntersectionObserverHookResult = [(node: IntersectionObserverHookRefCallbackNode) => void, {
-    entry: IntersectionObserverEntry | undefined;
-}];
-declare function useIntersectionObserver({ root, rootMargin, threshold, }?: IntersectionObserverInit): IntersectionObserverHookResult;
-export default useIntersectionObserver;
+export * from './types';
+export { default as useIntersectionObserver } from './useIntersectionObserver';
+export { default as useTrackVisibility } from './useTrackVisibility';

dist/react-intersection-observer-hook.cjs.development.js

@@ -5,2 +5,5 @@ 'use strict';
 
+// https://developers.google.com/web/updates/2016/04/intersectionobserver
+// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
 function useIntersectionObserver(_temp) {
@@ -55,11 +58,20 @@ var _ref = _temp === void 0 ? {} : _temp,
   }, [root, rootMargin, threshold]);
-  var result = react.useMemo(function () {
-    return [refCallback, {
-      entry: entry
-    }];
-  }, [refCallback, entry]);
-  return result;
+  return [refCallback, {
+    entry: entry
+  }];
 }
 
-exports.default = useIntersectionObserver;
+function useTrackVisibility(props) {
+  var _useIntersectionObser = useIntersectionObserver(props),
+      ref = _useIntersectionObser[0],
+      entry = _useIntersectionObser[1].entry;
+
+  var isVisible = Boolean(entry && entry.isIntersecting);
+  return [ref, {
+    isVisible: isVisible
+  }];
+}
+
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useTrackVisibility = useTrackVisibility;
 //# sourceMappingURL=react-intersection-observer-hook.cjs.development.js.map

dist/react-intersection-observer-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var r=require("react");exports.default=function(e){var t=void 0===e?{}:e,n=t.root,o=void 0===n?null:n,u=t.rootMargin,c=void 0===u?"0px":u,i=t.threshold,s=void 0===i?[0]:i,a=r.useRef(),v=r.useState(),f=v[0],d=v[1];r.useEffect((function(){return function(){var r=a.current;r&&r.disconnect()}}),[]);var l=r.useCallback((function(r){var e=(a.current||(a.current=new IntersectionObserver((function(r){d(r[0])}),{root:o,rootMargin:c,threshold:s})),a.current);e.disconnect(),r&&e.observe(r)}),[o,c,s]);return r.useMemo((function(){return[l,{entry:f}]}),[l,f])};
+"use strict";var r=require("react");function e(e){var t=void 0===e?{}:e,n=t.root,o=void 0===n?null:n,i=t.rootMargin,s=void 0===i?"0px":i,c=t.threshold,u=void 0===c?[0]:c,a=r.useRef(),v=r.useState(),f=v[0],l=v[1];return r.useEffect((function(){return function(){var r=a.current;r&&r.disconnect()}}),[]),[r.useCallback((function(r){var e=(a.current||(a.current=new IntersectionObserver((function(r){l(r[0])}),{root:o,rootMargin:s,threshold:u})),a.current);e.disconnect(),r&&e.observe(r)}),[o,s,u]),{entry:f}]}exports.useIntersectionObserver=e,exports.useTrackVisibility=function(r){var t=e(r),n=t[1].entry;return[t[0],{isVisible:Boolean(n&&n.isIntersecting)}]};
 //# sourceMappingURL=react-intersection-observer-hook.cjs.production.min.js.map

dist/react-intersection-observer-hook.esm.js

@@ -1,3 +0,6 @@
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 
+// https://developers.google.com/web/updates/2016/04/intersectionobserver
+// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
 function useIntersectionObserver(_temp) {
@@ -52,11 +55,19 @@ var _ref = _temp === void 0 ? {} : _temp,
   }, [root, rootMargin, threshold]);
-  var result = useMemo(function () {
-    return [refCallback, {
-      entry: entry
-    }];
-  }, [refCallback, entry]);
-  return result;
+  return [refCallback, {
+    entry: entry
+  }];
 }
 
-export default useIntersectionObserver;
+function useTrackVisibility(props) {
+  var _useIntersectionObser = useIntersectionObserver(props),
+      ref = _useIntersectionObser[0],
+      entry = _useIntersectionObser[1].entry;
+
+  var isVisible = Boolean(entry && entry.isIntersecting);
+  return [ref, {
+    isVisible: isVisible
+  }];
+}
+
+export { useIntersectionObserver, useTrackVisibility };
 //# sourceMappingURL=react-intersection-observer-hook.esm.js.map

package.json

 {
   "name": "react-intersection-observer-hook",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "onderonur",

README.md

 # react-intersection-observer-hook
 
-This is a React hook to use [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively.
+🔨 Under construction... 🔨
 
-🔨 Under construction... 🔨
+This is a React hook to use [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively. By using this hook, you can easily track if a component is visible or not.
+
+This package is written in TypeScript (all thanks to [TSDX](https://github.com/jaredpalmer/tsdx)). So, you can use it in your TypeScript projects too.
+
+**Live demo is [here](https://onderonur.github.io/react-intersection-observer-hook).**
+
+## Installation
+
+```sh
+npm install react-intersection-observer-hook
+```
+
+## Usage
+
+Here is a simple code to use the hook. Just pass the `ref callback` to the component that you want to track its visibility. You can find a more complete code in the `example` folder.
+
+```javascript
+import React from 'react';
+import useIntersectionObserver from 'react-intersection-observer-hook';
+// ...
+
+function Example() {
+  const [ref, { entry }] = useIntersectionObserver();
+  const isVisible = entry && entry.isIntersecting;
+
+  return (
+    <>
+      <p>
+        {isVisible
+          ? 'The component is visible.'
+          : 'The component is not visible.'}
+      </p>
+      <SomeComponentToTrack ref={ref} />
+    </>
+  );
+};
+```
+
+## Props
+
+- **root:** The viewport element to check the visibility of the given target with the ref callback. The default value is the browser viewport.
+- **rootMargin:** Indicates the margin value around the root element. Default value is zero for all directions (top, right, bottom and left).
+- **threshold:** Threshold value (or values) to trigger the observer.
+
+*For more info, you can check [here](https://developers.google.com/web/updates/2016/04/intersectionobserver) and [here](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).*

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

20910

increased by12.89%

Number of package files

15

increased by25%

Lines of code

149

increased by23.14%

Number of lines in readme file

50

increased by733.33%

No dependency changes