12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- 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;
- }
|