Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.4 kB · 72 lines
TSX
at develop
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273import { useCallback, useEffect, useMemo, useRef, useState } from "react";
type ObserverRect = Omit<DOMRectReadOnly, "toJSON">;
const defaultState: ObserverRect = { x: 0, y: 0, width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0,};
const browser = typeof window !== "undefined";
export function useResizeObserver<T extends HTMLElement = any>() { const frameID = useRef(0); const ref = useRef<T>(null);
const [rect, setRect] = useState<ObserverRect>(defaultState);
const observer = useMemo( () => browser ? new ResizeObserver((entries: any) => { const entry = entries[0];
if (entry) { cancelAnimationFrame(frameID.current); frameID.current = requestAnimationFrame(() => { if (ref.current) { setRect(entry.contentRect); } }); } }) : null, [], );
const measure = useCallback(() => { const rect = ref.current?.getBoundingClientRect(); if (rect) { setRect(rect); } return rect; }, []);
useEffect(() => { if (!observer) return; if (ref.current) { observer.observe(ref.current); }
return () => { observer.disconnect();
if (frameID.current) { cancelAnimationFrame(frameID.current); } }; }, [observer]);
return [ref, rect, measure] as const;}
export function useElementSize<T extends HTMLElement = any>() { const [ref, { width, height }] = useResizeObserver<T>(); return { ref, width, height };}