rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
33 lines (32 loc) • 1.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBoundingclientrect = void 0;
var react_1 = require("react");
var useDidMount_1 = require("./useDidMount");
var useMutationObserver_1 = require("./useMutationObserver");
/**
* @param element HTML element whose boundingclientrect is needed
* @returns DOMRect
*/
function getBoundingClientRect(element) {
return element.getBoundingClientRect();
}
/**
* useBoundingclientRect hook
*
* @param ref The React ref whose ClientRect is needed
* @returns DOMRect | null
* @see https://react-hooks.org/docs/useBoundingclientRect
*/
function useBoundingclientrect(ref) {
var _a = (0, react_1.useState)(null), domRect = _a[0], setDomRect = _a[1];
var update = (0, react_1.useCallback)(function () {
setDomRect(ref.current ? getBoundingClientRect(ref.current) : null);
}, [ref]);
(0, useDidMount_1.useDidMount)(function () {
update();
});
(0, useMutationObserver_1.useMutationObserver)(ref, update);
return domRect;
}
exports.useBoundingclientrect = useBoundingclientrect;