@adrihfly/screen-detector-hook/dist/index.esm.js

A useful react hook for handle screen position and size

import { useMemo, useState, useCallback, useEffect } from 'react';

const useScreenDetector = ({ breakpoints, detector }) => {
    const entries = useMemo(() => Object.entries(breakpoints).sort((a, b) => a[1] > b[1] ? 1 : -1), [breakpoints]);
    const [screen, setScreen] = useState(entries[0][0]);
    const [landscape, setLandscape] = useState(false);
    const handleSize = useCallback(() => {
        const innerWidth = window.innerWidth;
        const innerHeight = window.innerHeight;
        const screenDetected = entries.reduce((prev, [breakpoint, width]) => {
            if (width < innerWidth)
                return breakpoint;
            return prev;
        }, entries[0][0]);
        if (screenDetected)
            setScreen(screenDetected);
        setLandscape(innerWidth > innerHeight);
    }, [breakpoints]);
    useEffect(() => {
        handleSize();
        if (!detector)
            return;
        window.addEventListener('resize', handleSize);
        return () => { window.removeEventListener('resize', handleSize); };
    }, [breakpoints]);
    return { screen, landscape };
};

export { useScreenDetector };