1 | import { useState } from 'react';
|
2 | import useEffect from './useIsomorphicEffect';
|
3 | var targetMap = new WeakMap();
|
4 | var resizeObserver;
|
5 |
|
6 | function getResizeObserver() {
|
7 |
|
8 | return resizeObserver = resizeObserver || new window.ResizeObserver(function (entries) {
|
9 | entries.forEach(function (entry) {
|
10 | var handler = targetMap.get(entry.target);
|
11 | if (handler) handler(entry.contentRect);
|
12 | });
|
13 | });
|
14 | }
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | export default function useResizeObserver(element) {
|
36 | var _useState = useState(null),
|
37 | rect = _useState[0],
|
38 | setRect = _useState[1];
|
39 |
|
40 | useEffect(function () {
|
41 | if (!element) return;
|
42 | getResizeObserver().observe(element);
|
43 | setRect(element.getBoundingClientRect());
|
44 | targetMap.set(element, function (rect) {
|
45 | setRect(rect);
|
46 | });
|
47 | return function () {
|
48 | targetMap.delete(element);
|
49 | };
|
50 | }, [element]);
|
51 | return rect;
|
52 | } |
\ | No newline at end of file |