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

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

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { useTheme } from "@bianic-ui/system";
import createMediaQueries from "./create-media-query";
import React from "react";

/**
 * React hook used to get the current responsive media breakpoint.
 *
 * @param defaultBreakpoint default breakpoint name
 * (in non-window environments like SSR)
 *
 * For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)
 * to get the default breakpoint value from the user-agent
 */
export function useBreakpoint(defaultBreakpoint) {
  var {
    breakpoints
  } = useTheme();
  var mediaQueries = React.useMemo(() => createMediaQueries(_extends({
    base: "0px"
  }, breakpoints)), [breakpoints]);
  var [currentBreakpoint, setCurrentBreakpoint] = React.useState(() => {
    if (!defaultBreakpoint) return undefined;
    var mediaQuery = mediaQueries.find(query => query.breakpoint === defaultBreakpoint);

    if (mediaQuery) {
      var breakpoint = _objectWithoutPropertiesLoose(mediaQuery, ["query"]);

      return breakpoint;
    }

    return undefined;
  });
  var current = currentBreakpoint == null ? void 0 : currentBreakpoint.breakpoint;
  var update = React.useCallback((query, breakpoint) => {
    if (query.matches && current !== breakpoint.breakpoint) {
      setCurrentBreakpoint(breakpoint);
    }
  }, [current]);
  React.useEffect(() => {
    var listeners = new Set();
    mediaQueries.forEach((_ref) => {
      var {
        query
      } = _ref,
          breakpoint = _objectWithoutPropertiesLoose(_ref, ["query"]);

      var mediaQuery = window.matchMedia(query); // trigger an initial update to determine media query

      update(mediaQuery, breakpoint);

      var handleChange = () => {
        update(mediaQuery, breakpoint);
      }; // add media query-listender


      mediaQuery.addListener(handleChange); // push the media query list handleChange
      // so we can use it to remove Listener

      listeners.add({
        mediaQuery,
        handleChange
      });
      return () => {
        // clean up 1
        mediaQuery.removeListener(handleChange);
      };
    });
    return () => {
      // clean up 2: for safety
      listeners.forEach((_ref2) => {
        var {
          mediaQuery,
          handleChange
        } = _ref2;
        mediaQuery.removeListener(handleChange);
      });
      listeners.clear();
    };
  }, [mediaQueries, breakpoints, update]);
  return currentBreakpoint == null ? void 0 : currentBreakpoint.breakpoint;
}
//# sourceMappingURL=use-breakpoint.js.map