metalib/common/hooks/useContainerDimensions.js

Snippets pack

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var React=_interopRequireWildcard(require("react")),_resizeObserver=_interopRequireDefault(require("@react-hook/resize-observer"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _getRequireWildcardCache(a){if("function"!=typeof WeakMap)return null;var b=new WeakMap,c=new WeakMap;return(_getRequireWildcardCache=function(a){return a?c:b})(a)}function _interopRequireWildcard(a,b){if(!b&&a&&a.__esModule)return a;if(null===a||"object"!=typeof a&&"function"!=typeof a)return{default:a};var c=_getRequireWildcardCache(b);if(c&&c.has(a))return c.get(a);var d={},e=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var f in a)if("default"!=f&&Object.prototype.hasOwnProperty.call(a,f)){var g=e?Object.getOwnPropertyDescriptor(a,f):null;g&&(g.get||g.set)?Object.defineProperty(d,f,g):d[f]=a[f]}return d.default=a,c&&c.set(a,d),d}/* Usage

// hooks
import {useContainerDimensions} from 'hooks/'

const MyComponent = () => {
  const componentRef = React.useRef(null);
  const { width, height, scrollTop, scrollLeft } = useContainerDimensions(componentRef);

  return (
    <div ref={componentRef}>
      <p>width: {width}px</p>
      <p>height: {height}px</p>
      <p>scrollTop: {scrollTop}px</p>
      <p>scrollLeft: {scrollLeft}px</p>
    <div/>
  )
}

*/ // libs
const useContainerDimensions=a=>{const b=()=>{if(!a.current)return c;const{offsetWidth:b,offsetHeight:d,scrollTop:e,scrollLeft:f,scrollWidth:g,scrollHeight:h}=a.current;return{width:b,height:d,scrollTop:e,scrollLeft:f,scrollWidth:g-b,scrollHeight:h-d}},[c,d]=React.useState({width:0,height:0,scrollTop:0,scrollLeft:0}),e=()=>d(b());return React.useLayoutEffect(()=>{e()},[a.current]),(0,_resizeObserver.default)(a.current,()=>{e()}),React.useEffect(()=>(d(b()),a.current?.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),a.current?.removeEventListener("scroll",e)}),[a.current]),c};var _default=useContainerDimensions;exports.default=_default;