react-usehooks-ts/lib/hooks/useMediaQuery.js

A collections of typescript supported react Custom hooks

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const useMediaQuery = (width) => {
    const [targetReached, setTargetReached] = (0, react_1.useState)(false);
    const updateTarget = (0, react_1.useCallback)((e) => {
        setTargetReached(e.matches);
    }, []);
    const mediaQuery = (0, react_1.useMemo)(() => `(max-width: ${width}px)`, [width]);
    (0, react_1.useEffect)(() => {
        const media = window.matchMedia(mediaQuery);
        media.addEventListener('change', (e) => updateTarget(e));
        // Check on mount (callback is not called until a change occurs)
        setTargetReached(media.matches);
        return () => media.removeEventListener('change', (e) => updateTarget(e));
    }, [updateTarget, mediaQuery]);
    return targetReached;
};
exports.default = useMediaQuery;