@prezly/theme-kit-ui/build/hooks/useDevice.cjs

UI components for Prezly themes

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDevice = useDevice;
var _web = require("@react-hookz/web");
/**
 * Values kept in sync with tailwindcss breakpoints
 */
var BREAKPOINT_SM = 640;
var BREAKPOINT_MD = 768;
var BREAKPOINT_LG = 1024;
var BREAKPOINT_XL = 1280;
var BREAKPOINT_2XL = 1536;
function useDevice() {
  var isSm = (0, _web.useMediaQuery)("(min-width: ".concat(BREAKPOINT_SM, "px)"), {
    initializeWithValue: true
  });
  var isMd = (0, _web.useMediaQuery)("(min-width: ".concat(BREAKPOINT_MD, "px)"), {
    initializeWithValue: true
  });
  var isLg = (0, _web.useMediaQuery)("(min-width: ".concat(BREAKPOINT_LG, "px)"), {
    initializeWithValue: true
  });
  var isXl = (0, _web.useMediaQuery)("(min-width: ".concat(BREAKPOINT_XL, "px)"), {
    initializeWithValue: true
  });
  var is2Xl = (0, _web.useMediaQuery)("(min-width: ".concat(BREAKPOINT_2XL, "px)"), {
    initializeWithValue: true
  });
  return {
    isSm,
    isMd,
    isLg,
    isXl,
    is2Xl
  };
}