mirror of
https://github.com/idanoo/GoScrobble.git
synced 2024-11-24 09:25:15 +00:00
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
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;
|
|
} |