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