rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
44 lines (43 loc) • 1.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResizeObserverRef = void 0;
var noop_1 = require("../utils/noop");
var react_1 = require("react");
var useFreshTick_1 = require("./useFreshTick");
var config = {
box: "content-box",
};
/**
*
* useResizeObserverRef hook
*
* Returns a resize observer for a React Ref and fires a callback
* https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
*
* @param {ResizeObserverCallback} callback Function that needs to be fired on resize
* @param {ResizeObserverOptions} options An options object allowing you to set options for the observation
* @returns {[CallbackRef]} callbackref
* @see https://react-hooks.org/docs/useResizeObserverRef
*/
function useResizeObserverRef(callback, options) {
if (options === void 0) { options = config; }
var _a = (0, react_1.useState)(null), node = _a[0], setNode = _a[1];
var freshCallback = (0, useFreshTick_1.useFreshTick)(callback);
(0, react_1.useEffect)(function () {
if (node) {
// Create an observer instance linked to the callback function
var observer_1 = new ResizeObserver(freshCallback);
// Start observing the target node for resizes
observer_1.observe(node, options);
return function () {
observer_1.disconnect();
};
}
return noop_1.noop;
}, [node, freshCallback, options]);
var ref = (0, react_1.useCallback)(function (node) {
setNode(node);
}, []);
return [ref];
}
exports.useResizeObserverRef = useResizeObserverRef;