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

A useful react hook for handle screen position and size

'use strict';

var react = require('react');

const useScreenDetector = ({ breakpoints, detector }) => {
    const entries = react.useMemo(() => Object.entries(breakpoints).sort((a, b) => a[1] > b[1] ? 1 : -1), [breakpoints]);
    const [screen, setScreen] = react.useState(entries[0][0]);
    const [landscape, setLandscape] = react.useState(false);
    const handleSize = react.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]);
    react.useEffect(() => {
        handleSize();
        if (!detector)
            return;
        window.addEventListener('resize', handleSize);
        return () => { window.removeEventListener('resize', handleSize); };
    }, [breakpoints]);
    return { screen, landscape };
};

exports.useScreenDetector = useScreenDetector;