rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
38 lines (37 loc) • 1.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBoundingclientrectRef = void 0;
var react_1 = require("react");
var useForkRef_1 = require("./useForkRef");
var useMutationObserverRef_1 = require("./useMutationObserverRef");
/**
* @param element HTML element whose boundingclientrect is needed
* @returns DOMRect
*/
function getBoundingClientRect(element) {
return element.getBoundingClientRect();
}
/**
* useBoundingclientrectRef hook
* Tracks the boundingclientrect of a React Ref and fires a callback when the element's size changes.
*
* @returns [CallbackRef | null, DOMRect | null, () => void]
* @see https://react-hooks.org/docs/useBoundingclientRectRef
*/
function useBoundingclientrectRef() {
var _a = (0, react_1.useState)(null), domRect = _a[0], setDomRect = _a[1];
var _b = (0, react_1.useState)(null), node = _b[0], setNode = _b[1];
var update = (0, react_1.useCallback)(function () {
setDomRect(node ? getBoundingClientRect(node) : null);
}, [node]);
(0, react_1.useEffect)(function () {
update();
}, [update]);
var ref = (0, react_1.useCallback)(function (nodeElement) {
setNode(nodeElement);
}, []);
var mutationObserverRef = (0, useMutationObserverRef_1.useMutationObserverRef)(update)[0];
var forkedRef = (0, useForkRef_1.useForkRef)(ref, mutationObserverRef);
return [forkedRef, domRect, update];
}
exports.useBoundingclientrectRef = useBoundingclientrectRef;