Files F99386765

useResizeObserver.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Fri, Jan 24, 02:29

useResizeObserver.js
View Options

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

Event Timeline