react-responsive-query/dist/index.mjs

[](https://badge.fury.io/js/react-responsive-query) [](https://opensource.org/licenses/ISC)

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};

// src/useBreakpoint.ts
import { useEffect, useState } from "react";

// src/defaultBreakpoints.ts
var defaultBreakpoints = {
  xs: 0,
  sm: 480,
  md: 768,
  lg: 1024,
  xl: 1280,
  xxl: 1536
};

// src/useBreakpoint.ts
function useBreakpoint(config) {
  var _a, _b, _c, _d, _e;
  const breakpoints = __spreadValues(__spreadValues({}, defaultBreakpoints), config);
  const [width, setWidth] = useState(
    typeof window !== "undefined" ? window.innerWidth : 0
  );
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  const ordered = Object.entries(breakpoints).sort(([, a], [, b]) => a - b);
  let current = ordered[0][0];
  for (let i = 0; i < ordered.length; i++) {
    const [key, min] = ordered[i];
    const nextMin = (_a = ordered[i + 1]) == null ? void 0 : _a[1];
    if (width >= min && (nextMin === void 0 || width < nextMin)) {
      current = key;
      break;
    }
  }
  const technicalFlags = Object.fromEntries(
    ordered.map(([key, min], i) => {
      var _a2;
      const max = (_a2 = ordered[i + 1]) == null ? void 0 : _a2[1];
      return [
        `is${key.charAt(0).toUpperCase()}${key.slice(1)}`,
        width >= min && (max === void 0 || width < max)
      ];
    })
  );
  const isMobile = width < ((_b = breakpoints.md) != null ? _b : 768);
  const isTablet = width >= ((_c = breakpoints.md) != null ? _c : 768) && width < ((_d = breakpoints.lg) != null ? _d : 1024);
  const isDesktop = width >= ((_e = breakpoints.lg) != null ? _e : 1024);
  return __spreadValues({
    width,
    current,
    isMobile,
    isTablet,
    isDesktop
  }, technicalFlags);
}
export {
  useBreakpoint
};