rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
43 lines (42 loc) • 1.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIntersectionObserverRef = void 0;
var react_1 = require("react");
var noop_1 = require("../utils/noop");
var config = {
root: null,
rootMargin: "0px 0px 0px 0px",
threshold: [0, 1],
};
/**
*
* useIntersectionObserverRef hook
*
* Returns a mutation observer for a React Ref and fires a callback
*
* @param {IntersectionObserverCallback} callback Function that needs to be fired on mutation
* @param {IntersectionObserverInit} options
* @see https://react-hooks.org/docs/useIntersectionObserverRef
*/
function useIntersectionObserverRef(callback, options) {
if (options === void 0) { options = config; }
var _a = options.root, root = _a === void 0 ? null : _a, rootMargin = options.rootMargin, threshold = options.threshold;
var _b = (0, react_1.useState)(null), node = _b[0], setNode = _b[1];
(0, react_1.useEffect)(function () {
// Create an observer instance linked to the callback function
if (node && callback) {
var observer_1 = new IntersectionObserver(callback, options);
// Start observing the target node for configured mutations
observer_1.observe(node);
return function () {
observer_1.disconnect();
};
}
return noop_1.noop;
}, [node, callback, root, rootMargin, threshold, options]);
var ref = (0, react_1.useCallback)(function (nodeElement) {
setNode(nodeElement);
}, []);
return [ref];
}
exports.useIntersectionObserverRef = useIntersectionObserverRef;