React hook for responsive width and height with support for resize events

useDimensions.tsx

import { useState, useEffect } from 'react';

const getDimensions = () => {
    const { innerWidth: width, innerHeight: height } = window;

    return {
        width,
        height
    };
};

export const useDimensions = () => {
    const [dimensions, setDimensions] = useState(getDimensions());

    useEffect(() => {
        const handleResize = () => {
            setDimensions(getDimensions());
        };
        window.addEventListener('resize', handleResize);

        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return dimensions;
};

// Usage
// const { width } = useDimensions();
// useEffect(() => {
//   setWidth(width)
// }, [width]);