Select Git revision
useWidth.ts
-
Janne Mareike Koschinski authoredJanne Mareike Koschinski authored
useWidth.ts 765 B
import {useEffect, useState} from "react";
export const useWidth = <T extends HTMLElement>(it: T | null) => {
const [width, setWidth] = useState<number>(0);
useEffect(() => {
let animationFrame: number | null = null;
const listener = () => {
animationFrame = window.requestAnimationFrame(() => {
animationFrame = null;
setWidth(it?.offsetWidth || 0);
});
};
listener();
window.addEventListener("resize", listener);
return () => {
window.removeEventListener("resize", listener);
if (animationFrame !== null) {
window.cancelAnimationFrame(animationFrame);
}
}
}, [it]);
return width;
}