@bianic-ui/media-query/dist/esm/use-media-query.js

A React hook for changing properties or visibility of a component based on css media query

import * as React from "react";
import { isBrowser } from "@bianic-ui/utils";

var isSupported = api => isBrowser && api in window;

var useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
/**
 * React hook that tracks state of a CSS media query
 *
 * @param query the media query to match
 */

export function useMediaQuery(query) {
  var [matches, setMatches] = React.useState(() => {
    if (!isSupported("matchMedia")) return false;
    return !!window.matchMedia(query).matches;
  });
  useSafeLayoutEffect(() => {
    if (!isSupported("matchMedia")) return;
    var mediaQueryList = window.matchMedia(query);

    var listener = () => setMatches(!!mediaQueryList.matches);

    mediaQueryList.addListener(listener);
    listener();
    return () => {
      mediaQueryList.removeListener(listener);
    };
  }, [query]);
  return [matches, setMatches];
}
//# sourceMappingURL=use-media-query.js.map