I use this ResizeObserver hook in my project with typescript
const useResizeObserver = () => {
const [entry, setEntry] = useState<ResizeObserverEntry>();
const [node, setNode] = useState<Element | null>(null);
const observer = useRef<ResizeObserver | null>(null);
const disconnect = useCallback(() => {
const { current } = observer;
if (current) {
current.disconnect();
}
}, []);
const observe = useCallback(() => {
observer.current = new ResizeObserver(([entry1]) => setEntry(entry1));
if (node) {
observer.current.observe(node);
}
}, [node]);
useLayoutEffect(() => {
observe();
return () => disconnect();
}, [disconnect, observe]);
return [setNode, entry];
};
const [node, entry] = useResizeObserver();
<div ref={node}>content</div>
When i use this hook in my component, I get this error
Type 'Dispatch<SetStateAction<Element | null>> | ResizeObserverEntry | undefined' is not assignable to type 'string | ((instance: HTMLTableHeaderCellElement | null) => void) | RefObject | null | undefined'. Type 'ResizeObserverEntry' is not assignable to type 'string | ((instance: HTMLTableHeaderCellElement | null) => void) | RefObject | null | undefined'. Property 'current' is missing in type 'ResizeObserverEntry' but required in type 'RefObject'.
Help fixed
