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

UI components for Prezly themes

import { useMediaQuery } from '@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;
export function useDevice() {
  var isSm = useMediaQuery("(min-width: ".concat(BREAKPOINT_SM, "px)"), {
    initializeWithValue: true
  });
  var isMd = useMediaQuery("(min-width: ".concat(BREAKPOINT_MD, "px)"), {
    initializeWithValue: true
  });
  var isLg = useMediaQuery("(min-width: ".concat(BREAKPOINT_LG, "px)"), {
    initializeWithValue: true
  });
  var isXl = useMediaQuery("(min-width: ".concat(BREAKPOINT_XL, "px)"), {
    initializeWithValue: true
  });
  var is2Xl = useMediaQuery("(min-width: ".concat(BREAKPOINT_2XL, "px)"), {
    initializeWithValue: true
  });
  return {
    isSm,
    isMd,
    isLg,
    isXl,
    is2Xl
  };
}