@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
37 lines • 1.49 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useElementBoundingClientRect = void 0;
const react_1 = __importDefault(require("react"));
/**
* Custom hook that returns the bounding client rect of a specified element.
*
* @param {Params} props - The hook parameters.
* @param {React.MutableRefObject<HTMLElement | null>} props.ref - The reference to the element.
*
* @returns {ReturnValue} - The hook return value.
* @returns {DOMRect | undefined} ReturnValue.measures - The bounding client rect of the element.
*/
const useElementBoundingClientRect = (props) => {
const [measures, setMeasures] = react_1.default.useState(undefined);
react_1.default.useEffect(() => {
const element = props.ref?.current;
if (!element) {
return () => null;
}
const getMeasures = () => {
if (element) {
const measure = element?.getBoundingClientRect();
setMeasures(measure);
}
};
getMeasures();
window.addEventListener('resize', getMeasures);
return () => window.removeEventListener('resize', getMeasures);
}, [props.ref]);
return { measures };
};
exports.useElementBoundingClientRect = useElementBoundingClientRect;
//# sourceMappingURL=useElementBoundingClientRect.js.map