useWidthAndHeight.tsx

useWidthAndHeight.tsx

import { useRef, useState, useEffect } from 'react';

export default function useWidthAndHeight() {
	const containerRef = useRef<HTMLDivElement>(null);
	const [width, setWidth] = useState(0);
	const [height, setHeight] = useState(0);
	const getDimensions = () => {
		if (containerRef.current) {
			setWidth(containerRef.current.offsetWidth);
			setHeight(containerRef.current.offsetHeight);
		}
	};
	useEffect(() => {
		const listener = () => getDimensions();
		window.addEventListener('resize', listener);
		return () => {
			window.removeEventListener('resize', listener);
		};
	}, [containerRef]);
	return [containerRef, width, height];
}