[Responsive Window Resize Event with ReactJS] #ReactJs #JavaScript

somResponsiveComponent.js

import React from "react";

function someResponsiveComponent() {
    const {height,width} = windowResizeEventListener();
    return (
        <p>
            The window <span>height = {height}</span><span>width = {width}</span>
        </p>
    );
}

windowResizeEventListener.js

import React, {useEffect,useState} from "react";

/**
 * This component makes available the window resize event with height and width
 * @return {{width: number, height: number}}
 */
function windowResizeEventListener() {

    const [width, setWindowWidth] = useState(window.innerWidth);
    const [height, setWindowHeight] = useState(window.innerHeight);

    useEffect(() => {
        const onResize = () => {
            setWindowWidth(window.innerWidth);
            setWindowHeight(window.innerHeight);
        };
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener('resize', onResize);
        };
    });

    return {width,height};
}