useResizeObserver
圖片的顯示範圍並不是固定的，例如當進入放大模式後左右兩邊的黑邊會需要消失。這時使用 ResizeObserver 解耦就變得很方便。（而且效能也不錯）
方便使用，我們參考 useHooks 的 useIntersectionObserver 另外寫了一個 useResizeObserver 觸發 rerender。
// useResizeObserver hook to observe size changes of a DOM element, return a ResizeObserver entry
export const useResizeObserver = (element: HTMLElement | null): ResizeObserverEntry | null => {
const [entry, setEntry] = useState<ResizeObserverEntry | null>(null);
useEffect(() => {
if (!element) return;
const resizeObserver = new ResizeObserver((entries) => {
if (entries.length > 0) {
setEntry(entries[0]);
}
});
resizeObserver.observe(element);
return () => {
resizeObserver.disconnect();
};
}, [element]);
return entry;
};
沒有什麼特別之處，簡單但蠻方便的。
ResizeObserver 的詳細資料可以參考文件： https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver