Estoy tratando de crear un gancho personalizado que calcule el ancho y el alto de un elemento DOM dado a través de useRef.

Calcula las dimensiones, sin embargo, no veo ningún resultado dinámico. Lo que significa que a medida que cambio el tamaño de la ventana, el ancho y la altura actuales del elemento DOM no se actualizan. Necesito alternar una clase css según el ancho del elemento DOM.

Este es mi gancho personalizado, que toma una referencia como su único parámetro:

 useDimensionObserver = refParam => { if (refParam === null) return false; const getDimensionsFromRef = refParam => ({ width: refParam.current?.getBoundingClientRect().width, height: refParam.current?.getBoundingClientRect().height }), [dimensions, setDimensions] = React.useState(getDimensionsFromRef(refParam)); React.useEffect(() => { const handleResize = () => setDimensions(getDimensionsFromRef(refParam)); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); return refParam ? dimensions : null; },

Este es el componente en el que hago uso de useDimensionObserver:

 GeneralTotals = (props = IGeneralTotals) => { const containerRef = React.useRef(null), d = useDimensionObserver(containerRef); console.log(d); // As I resize the window, the container is also being resized so d.width and d.height need to be made dynamic. //I shall take action with 'd' potentially something like this... //if(d !== null && d.width < 450) setToggleInvisibleClass(true) return (<div className="card-title-tags" key="cal" ref={containerRef}> ..... </div>); };