@nlabs/arkhamjs-utils-react
Version:
ArkhamJS React Utilities
50 lines (49 loc) • 4.99 kB
JavaScript
/**
* Copyright (c) 2020-Present, Nitrogen Labs, Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/ import { useCallback, useLayoutEffect, useState } from 'react';
const getComponentSize = (element)=>{
if (!element) {
return {
height: undefined,
width: undefined
};
}
const { offsetHeight: height, offsetWidth: width } = element;
return {
height,
width
};
};
export const useComponentSize = (component)=>{
const [componentSize, setComponentSize] = useState(()=>getComponentSize(component));
const onResize = useCallback(()=>{
if (component) {
setComponentSize(getComponentSize(component));
}
}, [
component
]);
useLayoutEffect(()=>{
if (!component) {
return undefined;
}
onResize();
// Use ResizeObserver if available (more efficient than window resize)
if (typeof ResizeObserver === 'function') {
const resizeObserver = new ResizeObserver(onResize);
resizeObserver.observe(component);
return ()=>{
resizeObserver.disconnect();
};
}
// Fallback to window resize
window.addEventListener('resize', onResize);
return ()=>window.removeEventListener('resize', onResize);
}, [
component,
onResize
]);
return componentSize;
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2Fya2hhbWpzL3BhY2thZ2VzL2Fya2hhbWpzLXV0aWxzLXJlYWN0L3NyYy91c2VDb21wb25lbnRTaXplLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIwLVByZXNlbnQsIE5pdHJvZ2VuIExhYnMsIEluYy5cbiAqIENvcHlyaWdodHMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBMaWNlbnNlLiBTZWUgdGhlIGFjY29tcGFueWluZyBMSUNFTlNFIGZpbGUgZm9yIHRlcm1zLlxuICovXG5pbXBvcnQge3VzZUNhbGxiYWNrLCB1c2VMYXlvdXRFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IGdldENvbXBvbmVudFNpemUgPSAoZWxlbWVudDogSFRNTEVsZW1lbnQgfCBudWxsKSA9PiB7XG4gIGlmKCFlbGVtZW50KSB7XG4gICAgcmV0dXJuIHtoZWlnaHQ6IHVuZGVmaW5lZCwgd2lkdGg6IHVuZGVmaW5lZH07XG4gIH1cblxuICBjb25zdCB7b2Zmc2V0SGVpZ2h0OiBoZWlnaHQsIG9mZnNldFdpZHRoOiB3aWR0aH0gPSBlbGVtZW50O1xuICByZXR1cm4ge2hlaWdodCwgd2lkdGh9O1xufTtcblxuZXhwb3J0IGNvbnN0IHVzZUNvbXBvbmVudFNpemUgPSAoY29tcG9uZW50OiBIVE1MRWxlbWVudCB8IG51bGwpID0+IHtcbiAgY29uc3QgW2NvbXBvbmVudFNpemUsIHNldENvbXBvbmVudFNpemVdID0gdXNlU3RhdGUoKCkgPT4gZ2V0Q29tcG9uZW50U2l6ZShjb21wb25lbnQpKTtcblxuICBjb25zdCBvblJlc2l6ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBpZihjb21wb25lbnQpIHtcbiAgICAgIHNldENvbXBvbmVudFNpemUoZ2V0Q29tcG9uZW50U2l6ZShjb21wb25lbnQpKTtcbiAgICB9XG4gIH0sIFtjb21wb25lbnRdKTtcblxuICB1c2VMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIGlmKCFjb21wb25lbnQpIHtcbiAgICAgIHJldHVybiB1bmRlZmluZWQ7XG4gICAgfVxuXG4gICAgb25SZXNpemUoKTtcblxuICAgIC8vIFVzZSBSZXNpemVPYnNlcnZlciBpZiBhdmFpbGFibGUgKG1vcmUgZWZmaWNpZW50IHRoYW4gd2luZG93IHJlc2l6ZSlcbiAgICBpZih0eXBlb2YgUmVzaXplT2JzZXJ2ZXIgPT09ICdmdW5jdGlvbicpIHtcbiAgICAgIGNvbnN0IHJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKG9uUmVzaXplKTtcbiAgICAgIHJlc2l6ZU9ic2VydmVyLm9ic2VydmUoY29tcG9uZW50KTtcblxuICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgcmVzaXplT2JzZXJ2ZXIuZGlzY29ubmVjdCgpO1xuICAgICAgfTtcbiAgICB9XG5cbiAgICAvLyBGYWxsYmFjayB0byB3aW5kb3cgcmVzaXplXG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIG9uUmVzaXplKTtcbiAgICByZXR1cm4gKCkgPT4gd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIG9uUmVzaXplKTtcbiAgfSwgW2NvbXBvbmVudCwgb25SZXNpemVdKTtcblxuICByZXR1cm4gY29tcG9uZW50U2l6ZTtcbn07XG4iXSwibmFtZXMiOlsidXNlQ2FsbGJhY2siLCJ1c2VMYXlvdXRFZmZlY3QiLCJ1c2VTdGF0ZSIsImdldENvbXBvbmVudFNpemUiLCJlbGVtZW50IiwiaGVpZ2h0IiwidW5kZWZpbmVkIiwid2lkdGgiLCJvZmZzZXRIZWlnaHQiLCJvZmZzZXRXaWR0aCIsInVzZUNvbXBvbmVudFNpemUiLCJjb21wb25lbnQiLCJjb21wb25lbnRTaXplIiwic2V0Q29tcG9uZW50U2l6ZSIsIm9uUmVzaXplIiwiUmVzaXplT2JzZXJ2ZXIiLCJyZXNpemVPYnNlcnZlciIsIm9ic2VydmUiLCJkaXNjb25uZWN0Iiwid2luZG93IiwiYWRkRXZlbnRMaXN0ZW5lciIsInJlbW92ZUV2ZW50TGlzdGVuZXIiXSwibWFwcGluZ3MiOiJBQUFBOzs7Q0FHQyxHQUNELFNBQVFBLFdBQVcsRUFBRUMsZUFBZSxFQUFFQyxRQUFRLFFBQU8sUUFBUTtBQUU3RCxNQUFNQyxtQkFBbUIsQ0FBQ0M7SUFDeEIsSUFBRyxDQUFDQSxTQUFTO1FBQ1gsT0FBTztZQUFDQyxRQUFRQztZQUFXQyxPQUFPRDtRQUFTO0lBQzdDO0lBRUEsTUFBTSxFQUFDRSxjQUFjSCxNQUFNLEVBQUVJLGFBQWFGLEtBQUssRUFBQyxHQUFHSDtJQUNuRCxPQUFPO1FBQUNDO1FBQVFFO0lBQUs7QUFDdkI7QUFFQSxPQUFPLE1BQU1HLG1CQUFtQixDQUFDQztJQUMvQixNQUFNLENBQUNDLGVBQWVDLGlCQUFpQixHQUFHWCxTQUFTLElBQU1DLGlCQUFpQlE7SUFFMUUsTUFBTUcsV0FBV2QsWUFBWTtRQUMzQixJQUFHVyxXQUFXO1lBQ1pFLGlCQUFpQlYsaUJBQWlCUTtRQUNwQztJQUNGLEdBQUc7UUFBQ0E7S0FBVTtJQUVkVixnQkFBZ0I7UUFDZCxJQUFHLENBQUNVLFdBQVc7WUFDYixPQUFPTDtRQUNUO1FBRUFRO1FBRUEsc0VBQXNFO1FBQ3RFLElBQUcsT0FBT0MsbUJBQW1CLFlBQVk7WUFDdkMsTUFBTUMsaUJBQWlCLElBQUlELGVBQWVEO1lBQzFDRSxlQUFlQyxPQUFPLENBQUNOO1lBRXZCLE9BQU87Z0JBQ0xLLGVBQWVFLFVBQVU7WUFDM0I7UUFDRjtRQUVBLDRCQUE0QjtRQUM1QkMsT0FBT0MsZ0JBQWdCLENBQUMsVUFBVU47UUFDbEMsT0FBTyxJQUFNSyxPQUFPRSxtQkFBbUIsQ0FBQyxVQUFVUDtJQUNwRCxHQUFHO1FBQUNIO1FBQVdHO0tBQVM7SUFFeEIsT0FBT0Y7QUFDVCxFQUFFIn0=