usehooks-ts
Version:
React hook library, ready to use, written in Typescript.
22 lines • 1.01 kB
JavaScript
import { useCallback, useLayoutEffect, useState } from 'react';
import { useEventListener } from '../useEventListener';
function useElementSize() {
var _a = useState(null), ref = _a[0], setRef = _a[1];
var _b = useState({
width: 0,
height: 0,
}), size = _b[0], setSize = _b[1];
var handleSize = useCallback(function () {
setSize({
width: (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0,
height: (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0,
});
}, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
useEventListener('resize', handleSize);
useLayoutEffect(function () {
handleSize();
}, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
return [setRef, size];
}
export default useElementSize;
//# sourceMappingURL=useElementSize.js.map