GoScrobble/web/node_modules/@restart/hooks/esm/useResizeObserver.js

52 lines
1.3 KiB
JavaScript
Raw Permalink Normal View History

2022-04-25 02:47:15 +00:00
import { useState } from 'react';
import useEffect from './useIsomorphicEffect';
var targetMap = new WeakMap();
var resizeObserver;
function getResizeObserver() {
// eslint-disable-next-line no-return-assign
return resizeObserver = resizeObserver || new window.ResizeObserver(function (entries) {
entries.forEach(function (entry) {
var handler = targetMap.get(entry.target);
if (handler) handler(entry.contentRect);
});
});
}
/**
* Efficiently observe size changes on an element. Depends on the `ResizeObserver` api,
* and polyfills are needed in older browsers.
*
* ```ts
* const [ref, attachRef] = useCallbackRef(null);
*
* const rect = useResizeObserver(ref);
*
* return (
* <div ref={attachRef}>
* {JSON.stringify(rect)}
* </div>
* )
* ```
*
* @param element The DOM element to observe
*/
export default function useResizeObserver(element) {
var _useState = useState(null),
rect = _useState[0],
setRect = _useState[1];
useEffect(function () {
if (!element) return;
getResizeObserver().observe(element);
setRect(element.getBoundingClientRect());
targetMap.set(element, function (rect) {
setRect(rect);
});
return function () {
targetMap.delete(element);
};
}, [element]);
return rect;
}