@peculiar/react-components 0.1.1 → 0.1.2

package/dist/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEventCallback = exports.useAutocomplete = exports.useWindowEventListener = exports.useImage = exports.useId = exports.useControllableState = exports.useClipboard = exports.useMergedRef = exports.useMediaQuery = void 0;
+exports.useEventCallback = exports.useAutocomplete = exports.useIntersectionObserver = exports.useWindowEventListener = exports.useImage = exports.useId = exports.useControllableState = exports.useClipboard = exports.useMergedRef = exports.useMediaQuery = void 0;
 var use_media_query_1 = require("./use_media_query");
 Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return use_media_query_1.useMediaQuery; } });
 var use_merged_ref_1 = require("./use_merged_ref");
@@ -15,6 +15,8 @@ var use_image_1 = require("./use_image");
 Object.defineProperty(exports, "useImage", { enumerable: true, get: function () { return use_image_1.useImage; } });
 var use_window_event_listener_1 = require("./use_window_event_listener");
 Object.defineProperty(exports, "useWindowEventListener", { enumerable: true, get: function () { return use_window_event_listener_1.useWindowEventListener; } });
+var use_intersection_observer_1 = require("./use_intersection_observer");
+Object.defineProperty(exports, "useIntersectionObserver", { enumerable: true, get: function () { return use_intersection_observer_1.useIntersectionObserver; } });
 var use_autocomplete_1 = require("./use_autocomplete");
 Object.defineProperty(exports, "useAutocomplete", { enumerable: true, get: function () { return use_autocomplete_1.useAutocomplete; } });
 var use_event_callback_1 = require("./use_event_callback");

package/dist/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA,qDAAkD;AAAzC,gHAAA,aAAa,OAAA;AACtB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,iDAAoE;AAA3D,6GAAA,YAAY,OAAA;AACrB,uDAAqF;AAA5E,wHAAA,oBAAoB,OAAA;AAC7B,mCAAiC;AAAxB,+FAAA,KAAK,OAAA;AACd,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yEAAqE;AAA5D,mIAAA,sBAAsB,OAAA;AAC/B,uDAQ4B;AAP1B,mHAAA,eAAe,OAAA;AAQjB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;AAAA,qDAAkD;AAAzC,gHAAA,aAAa,OAAA;AACtB,mDAAgD;AAAvC,8GAAA,YAAY,OAAA;AACrB,iDAAoE;AAA3D,6GAAA,YAAY,OAAA;AACrB,uDAAqF;AAA5E,wHAAA,oBAAoB,OAAA;AAC7B,mCAAiC;AAAxB,+FAAA,KAAK,OAAA;AACd,yCAAuC;AAA9B,qGAAA,QAAQ,OAAA;AACjB,yEAAqE;AAA5D,mIAAA,sBAAsB,OAAA;AAC/B,yEAAsE;AAA7D,oIAAA,uBAAuB,OAAA;AAChC,uDAQ4B;AAP1B,mHAAA,eAAe,OAAA;AAQjB,2DAAwD;AAA/C,sHAAA,gBAAgB,OAAA"}

package/dist/cjs/hooks/use_intersection_observer.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = void 0;
+var react_1 = __importDefault(require("react"));
+var intersection_observer_1 = require("../utils/intersection_observer");
+/**
+ * React sensor hook that tracks the changes in
+ * the intersection of a target element with an ancestor element
+ * or with a top-level document's viewport.
+ *
+ * @returns
+ * the refCallback function to determine which item to observe
+ * @returns
+ * the isIntersecting value to detect observing item is intersecting
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [refIntersecting, { isIntersecting }] = useIntersectionObserver();
+ *   return (
+ *      <div
+ *        ref={refIntersecting}
+ *      >
+ *        {isIntersecting ? 'I\'m in the viewport' : null}
+ *      </div>
+ *   );
+ * }
+ * ```
+ */
+function useIntersectionObserver() {
+    var nodeRef = react_1.default.useRef(null);
+    var _a = react_1.default.useState(false), isIntersecting = _a[0], setIntersecting = _a[1];
+    react_1.default.useEffect(function () { return function () {
+        if (nodeRef.current) {
+            intersection_observer_1.intersectionObserver.remove(nodeRef.current);
+        }
+    }; }, []);
+    var refCallback = react_1.default.useCallback(function (node) {
+        if (node) {
+            intersection_observer_1.intersectionObserver.init();
+            nodeRef.current = node;
+            intersection_observer_1.intersectionObserver.add(node, setIntersecting);
+        }
+    }, []);
+    return [refCallback, { isIntersecting: isIntersecting }];
+}
+exports.useIntersectionObserver = useIntersectionObserver;
+//# sourceMappingURL=use_intersection_observer.js.map

package/dist/cjs/hooks/use_intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_intersection_observer.js","sourceRoot":"","sources":["../../../src/hooks/use_intersection_observer.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,wEAAsE;AAetE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAgB,uBAAuB;IACrC,IAAM,OAAO,GAAG,eAAK,CAAC,MAAM,CAA0C,IAAI,CAAC,CAAC;IACtE,IAAA,KAAoC,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAxD,cAAc,QAAA,EAAE,eAAe,QAAyB,CAAC;IAEhE,eAAK,CAAC,SAAS,CAAC,cAAM,OAAA;QACpB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,4CAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC9C;IACH,CAAC,EAJqB,CAIrB,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CACnC,UAAC,IAAI;QACH,IAAI,IAAI,EAAE;YACR,4CAAoB,CAAC,IAAI,EAAE,CAAC;YAC5B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,4CAAoB,CAAC,GAAG,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;SACjD;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CAAC,WAAW,EAAE,EAAE,cAAc,gBAAA,EAAE,CAAC,CAAC;AAC3C,CAAC;AAtBD,0DAsBC"}

package/dist/cjs/utils/intersection_observer.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.intersectionObserver = void 0;
+var IntersectionObserverDirective = /** @class */ (function () {
+    function IntersectionObserverDirective() {
+        // As each observable child attaches itself to the parent observer, we need to
+        // map Elements to Callbacks so that when an Element's intersection changes,
+        // we'll know which callback to invoke. For this, we'll use an ES6 Map.
+        this.mapping = new Map();
+    }
+    // I initialize the intersection observer parent directive.
+    IntersectionObserverDirective.prototype.init = function () {
+        var _this = this;
+        if (!this.observer) {
+            this.observer = new IntersectionObserver(function (entries) {
+                // eslint-disable-next-line no-restricted-syntax
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    var callback = _this.mapping.get(entry.target);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    (callback && callback(entry.isIntersecting));
+                }
+            });
+        }
+        return this.observer;
+    };
+    IntersectionObserverDirective.prototype.assertObserver = function () {
+        if (!this.observer) {
+            throw new Error('You need to initialize the observer before');
+        }
+    };
+    // I add the given Element for intersection observation. When the intersection status
+    // changes, the given callback is invoked with the new status.
+    IntersectionObserverDirective.prototype.add = function (element, callback) {
+        this.assertObserver();
+        this.mapping.set(element, callback);
+        this.observer.observe(element);
+    };
+    // I get called once when the host element is being destroyed.
+    IntersectionObserverDirective.prototype.destroy = function () {
+        this.assertObserver();
+        this.mapping.clear();
+        this.observer.disconnect();
+    };
+    // I remove the given Element from intersection observation.
+    IntersectionObserverDirective.prototype.remove = function (element) {
+        this.assertObserver();
+        this.mapping.delete(element);
+        this.observer.unobserve(element);
+    };
+    return IntersectionObserverDirective;
+}());
+exports.intersectionObserver = new IntersectionObserverDirective();
+//# sourceMappingURL=intersection_observer.js.map

package/dist/cjs/utils/intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection_observer.js","sourceRoot":"","sources":["../../../src/utils/intersection_observer.ts"],"names":[],"mappings":";;;AAAA;IAKE;QACE,8EAA8E;QAC9E,4EAA4E;QAC5E,uEAAuE;QACvE,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED,2DAA2D;IACpD,4CAAI,GAAX;QAAA,iBAgBC;QAfC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACtC,UAAC,OAAoC;gBACnC,gDAAgD;gBAChD,KAAoB,UAAO,EAAP,mBAAO,EAAP,qBAAO,EAAP,IAAO,EAAE;oBAAxB,IAAM,KAAK,gBAAA;oBACd,IAAM,QAAQ,GAAG,KAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBAEhD,oEAAoE;oBACpE,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;iBAC9C;YACH,CAAC,CACF,CAAC;SACH;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEO,sDAAc,GAAtB;QACE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;SAC/D;IACH,CAAC;IAED,qFAAqF;IACrF,8DAA8D;IACvD,2CAAG,GAAV,UAAW,OAAoB,EAAE,QAAkB;QACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,8DAA8D;IACvD,+CAAO,GAAd;QACE,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,4DAA4D;IACrD,8CAAM,GAAb,UAAc,OAAoB;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IACH,oCAAC;AAAD,CAAC,AA7DD,IA6DC;AAEY,QAAA,oBAAoB,GAAG,IAAI,6BAA6B,EAAE,CAAC"}

package/dist/esm/hooks/index.js

@@ -5,6 +5,7 @@ export { useControllableState } from './use_controllable';
 export { useId } from './use_id';
 export { useImage } from './use_image';
 export { useWindowEventListener } from './use_window_event_listener';
+export { useIntersectionObserver } from './use_intersection_observer';
 export { useAutocomplete, } from './use_autocomplete';
 export { useEventCallback } from './use_event_callback';
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAA6B,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,eAAe,GAOhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAA6B,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,eAAe,GAOhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/hooks/use_intersection_observer.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { intersectionObserver } from '../utils/intersection_observer';
+/**
+ * React sensor hook that tracks the changes in
+ * the intersection of a target element with an ancestor element
+ * or with a top-level document's viewport.
+ *
+ * @returns
+ * the refCallback function to determine which item to observe
+ * @returns
+ * the isIntersecting value to detect observing item is intersecting
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [refIntersecting, { isIntersecting }] = useIntersectionObserver();
+ *   return (
+ *      <div
+ *        ref={refIntersecting}
+ *      >
+ *        {isIntersecting ? 'I\'m in the viewport' : null}
+ *      </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIntersectionObserver() {
+    var nodeRef = React.useRef(null);
+    var _a = React.useState(false), isIntersecting = _a[0], setIntersecting = _a[1];
+    React.useEffect(function () { return function () {
+        if (nodeRef.current) {
+            intersectionObserver.remove(nodeRef.current);
+        }
+    }; }, []);
+    var refCallback = React.useCallback(function (node) {
+        if (node) {
+            intersectionObserver.init();
+            nodeRef.current = node;
+            intersectionObserver.add(node, setIntersecting);
+        }
+    }, []);
+    return [refCallback, { isIntersecting: isIntersecting }];
+}
+//# sourceMappingURL=use_intersection_observer.js.map

package/dist/esm/hooks/use_intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_intersection_observer.js","sourceRoot":"","sources":["../../../src/hooks/use_intersection_observer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAetE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,uBAAuB;IACrC,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAA0C,IAAI,CAAC,CAAC;IACtE,IAAA,KAAoC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAxD,cAAc,QAAA,EAAE,eAAe,QAAyB,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,cAAM,OAAA;QACpB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC9C;IACH,CAAC,EAJqB,CAIrB,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,UAAC,IAAI;QACH,IAAI,IAAI,EAAE;YACR,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC5B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,oBAAoB,CAAC,GAAG,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;SACjD;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CAAC,WAAW,EAAE,EAAE,cAAc,gBAAA,EAAE,CAAC,CAAC;AAC3C,CAAC"}

package/dist/esm/utils/intersection_observer.js

@@ -0,0 +1,51 @@
+var IntersectionObserverDirective = /** @class */ (function () {
+    function IntersectionObserverDirective() {
+        // As each observable child attaches itself to the parent observer, we need to
+        // map Elements to Callbacks so that when an Element's intersection changes,
+        // we'll know which callback to invoke. For this, we'll use an ES6 Map.
+        this.mapping = new Map();
+    }
+    // I initialize the intersection observer parent directive.
+    IntersectionObserverDirective.prototype.init = function () {
+        var _this = this;
+        if (!this.observer) {
+            this.observer = new IntersectionObserver(function (entries) {
+                // eslint-disable-next-line no-restricted-syntax
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    var callback = _this.mapping.get(entry.target);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    (callback && callback(entry.isIntersecting));
+                }
+            });
+        }
+        return this.observer;
+    };
+    IntersectionObserverDirective.prototype.assertObserver = function () {
+        if (!this.observer) {
+            throw new Error('You need to initialize the observer before');
+        }
+    };
+    // I add the given Element for intersection observation. When the intersection status
+    // changes, the given callback is invoked with the new status.
+    IntersectionObserverDirective.prototype.add = function (element, callback) {
+        this.assertObserver();
+        this.mapping.set(element, callback);
+        this.observer.observe(element);
+    };
+    // I get called once when the host element is being destroyed.
+    IntersectionObserverDirective.prototype.destroy = function () {
+        this.assertObserver();
+        this.mapping.clear();
+        this.observer.disconnect();
+    };
+    // I remove the given Element from intersection observation.
+    IntersectionObserverDirective.prototype.remove = function (element) {
+        this.assertObserver();
+        this.mapping.delete(element);
+        this.observer.unobserve(element);
+    };
+    return IntersectionObserverDirective;
+}());
+export var intersectionObserver = new IntersectionObserverDirective();
+//# sourceMappingURL=intersection_observer.js.map

package/dist/esm/utils/intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection_observer.js","sourceRoot":"","sources":["../../../src/utils/intersection_observer.ts"],"names":[],"mappings":"AAAA;IAKE;QACE,8EAA8E;QAC9E,4EAA4E;QAC5E,uEAAuE;QACvE,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED,2DAA2D;IACpD,4CAAI,GAAX;QAAA,iBAgBC;QAfC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACtC,UAAC,OAAoC;gBACnC,gDAAgD;gBAChD,KAAoB,UAAO,EAAP,mBAAO,EAAP,qBAAO,EAAP,IAAO,EAAE;oBAAxB,IAAM,KAAK,gBAAA;oBACd,IAAM,QAAQ,GAAG,KAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBAEhD,oEAAoE;oBACpE,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;iBAC9C;YACH,CAAC,CACF,CAAC;SACH;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEO,sDAAc,GAAtB;QACE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;SAC/D;IACH,CAAC;IAED,qFAAqF;IACrF,8DAA8D;IACvD,2CAAG,GAAV,UAAW,OAAoB,EAAE,QAAkB;QACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,8DAA8D;IACvD,+CAAO,GAAd;QACE,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,4DAA4D;IACrD,8CAAM,GAAb,UAAc,OAAoB;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IACH,oCAAC;AAAD,CAAC,AA7DD,IA6DC;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,IAAI,6BAA6B,EAAE,CAAC"}

package/dist/esnext/hooks/index.js

@@ -5,6 +5,7 @@ export { useControllableState } from './use_controllable';
 export { useId } from './use_id';
 export { useImage } from './use_image';
 export { useWindowEventListener } from './use_window_event_listener';
+export { useIntersectionObserver } from './use_intersection_observer';
 export { useAutocomplete, } from './use_autocomplete';
 export { useEventCallback } from './use_event_callback';
 //# sourceMappingURL=index.js.map

package/dist/esnext/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAA6B,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,eAAe,GAOhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAuB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAA6B,MAAM,oBAAoB,CAAC;AACrF,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EACL,eAAe,GAOhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esnext/hooks/use_intersection_observer.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { intersectionObserver } from '../utils/intersection_observer';
+/**
+ * React sensor hook that tracks the changes in
+ * the intersection of a target element with an ancestor element
+ * or with a top-level document's viewport.
+ *
+ * @returns
+ * the refCallback function to determine which item to observe
+ * @returns
+ * the isIntersecting value to detect observing item is intersecting
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [refIntersecting, { isIntersecting }] = useIntersectionObserver();
+ *   return (
+ *      <div
+ *        ref={refIntersecting}
+ *      >
+ *        {isIntersecting ? 'I\'m in the viewport' : null}
+ *      </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIntersectionObserver() {
+    const nodeRef = React.useRef(null);
+    const [isIntersecting, setIntersecting] = React.useState(false);
+    React.useEffect(() => () => {
+        if (nodeRef.current) {
+            intersectionObserver.remove(nodeRef.current);
+        }
+    }, []);
+    const refCallback = React.useCallback((node) => {
+        if (node) {
+            intersectionObserver.init();
+            nodeRef.current = node;
+            intersectionObserver.add(node, setIntersecting);
+        }
+    }, []);
+    return [refCallback, { isIntersecting }];
+}
+//# sourceMappingURL=use_intersection_observer.js.map

package/dist/esnext/hooks/use_intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_intersection_observer.js","sourceRoot":"","sources":["../../../src/hooks/use_intersection_observer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAetE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,uBAAuB;IACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAA0C,IAAI,CAAC,CAAC;IAC5E,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC9C;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,IAAI,EAAE,EAAE;QACP,IAAI,IAAI,EAAE;YACR,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC5B,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,oBAAoB,CAAC,GAAG,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;SACjD;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CAAC,WAAW,EAAE,EAAE,cAAc,EAAE,CAAC,CAAC;AAC3C,CAAC"}

package/dist/esnext/utils/intersection_observer.js

@@ -0,0 +1,50 @@
+class IntersectionObserverDirective {
+    mapping;
+    observer;
+    constructor() {
+        // As each observable child attaches itself to the parent observer, we need to
+        // map Elements to Callbacks so that when an Element's intersection changes,
+        // we'll know which callback to invoke. For this, we'll use an ES6 Map.
+        this.mapping = new Map();
+    }
+    // I initialize the intersection observer parent directive.
+    init() {
+        if (!this.observer) {
+            this.observer = new IntersectionObserver((entries) => {
+                // eslint-disable-next-line no-restricted-syntax
+                for (const entry of entries) {
+                    const callback = this.mapping.get(entry.target);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    (callback && callback(entry.isIntersecting));
+                }
+            });
+        }
+        return this.observer;
+    }
+    assertObserver() {
+        if (!this.observer) {
+            throw new Error('You need to initialize the observer before');
+        }
+    }
+    // I add the given Element for intersection observation. When the intersection status
+    // changes, the given callback is invoked with the new status.
+    add(element, callback) {
+        this.assertObserver();
+        this.mapping.set(element, callback);
+        this.observer.observe(element);
+    }
+    // I get called once when the host element is being destroyed.
+    destroy() {
+        this.assertObserver();
+        this.mapping.clear();
+        this.observer.disconnect();
+    }
+    // I remove the given Element from intersection observation.
+    remove(element) {
+        this.assertObserver();
+        this.mapping.delete(element);
+        this.observer.unobserve(element);
+    }
+}
+export const intersectionObserver = new IntersectionObserverDirective();
+//# sourceMappingURL=intersection_observer.js.map

package/dist/esnext/utils/intersection_observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"intersection_observer.js","sourceRoot":"","sources":["../../../src/utils/intersection_observer.ts"],"names":[],"mappings":"AAAA,MAAM,6BAA6B;IACzB,OAAO,CAAyB;IAEhC,QAAQ,CAAwB;IAExC;QACE,8EAA8E;QAC9E,4EAA4E;QAC5E,uEAAuE;QACvE,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;IAC3B,CAAC;IAED,2DAA2D;IACpD,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CACtC,CAAC,OAAoC,EAAE,EAAE;gBACvC,gDAAgD;gBAChD,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;oBAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBAEhD,oEAAoE;oBACpE,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;iBAC9C;YACH,CAAC,CACF,CAAC;SACH;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;SAC/D;IACH,CAAC;IAED,qFAAqF;IACrF,8DAA8D;IACvD,GAAG,CAAC,OAAoB,EAAE,QAAkB;QACjD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC;IAED,8DAA8D;IACvD,OAAO;QACZ,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,4DAA4D;IACrD,MAAM,CAAC,OAAoB;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,6BAA6B,EAAE,CAAC"}

package/dist/types/hooks/index.d.ts

@@ -5,5 +5,6 @@ export { useControllableState, UseControllableStateProps } from './use_controlla
 export { useId } from './use_id';
 export { useImage } from './use_image';
 export { useWindowEventListener } from './use_window_event_listener';
+export { useIntersectionObserver } from './use_intersection_observer';
 export { useAutocomplete, UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue, AutocompleteGroupedOption, AutocompleteChangeReason, AutocompleteChangeDetails, } from './use_autocomplete';
 export { useEventCallback } from './use_event_callback';

package/dist/types/hooks/use_intersection_observer.d.ts

@@ -0,0 +1,34 @@
+export declare type IntersectionObserverHookRefCallbackNode = HTMLElement | null;
+export declare type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
+export declare type IntersectionObserverHookResult = [
+    IntersectionObserverHookRefCallback,
+    {
+        isIntersecting: boolean;
+    }
+];
+/**
+ * React sensor hook that tracks the changes in
+ * the intersection of a target element with an ancestor element
+ * or with a top-level document's viewport.
+ *
+ * @returns
+ * the refCallback function to determine which item to observe
+ * @returns
+ * the isIntersecting value to detect observing item is intersecting
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [refIntersecting, { isIntersecting }] = useIntersectionObserver();
+ *   return (
+ *      <div
+ *        ref={refIntersecting}
+ *      >
+ *        {isIntersecting ? 'I\'m in the viewport' : null}
+ *      </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useIntersectionObserver(): IntersectionObserverHookResult;

package/dist/types/utils/intersection_observer.d.ts

@@ -0,0 +1,12 @@
+declare class IntersectionObserverDirective {
+    private mapping;
+    private observer?;
+    constructor();
+    init(): IntersectionObserver;
+    private assertObserver;
+    add(element: HTMLElement, callback: Function): void;
+    destroy(): void;
+    remove(element: HTMLElement): void;
+}
+export declare const intersectionObserver: IntersectionObserverDirective;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -96,5 +96,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "7f95dd96ca0cf04c0922c258e5207ac3cf414eac"
+  "gitHead": "b596b2bd3ade5707280920d92f96fe65bee1367e"
 }