react-media-query-kit/dist/index.js

React hook and component utility to detect mobile, tablet, desktop, large desktop and TV screen sizes.

var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};

// src/hooks/useMedia.js
import { useState, useEffect, useCallback } from "react";

// src/breakpoint.js
var DEVICE_RANGES = {
  mobile: { min: 0, max: 480 },
  tablet: { min: 481, max: 768 },
  laptop: { min: 769, max: 1024 },
  desktop: { min: 1025, max: 1440 },
  largeDesktop: { min: 1441, max: 1920 },
  tv: { min: 1921, max: Infinity }
};
var getDevice = (width) => {
  if (typeof width !== "number" || width < 0) return "mobile";
  if (width <= DEVICE_RANGES.mobile.max) return "mobile";
  if (width <= DEVICE_RANGES.tablet.max) return "tablet";
  if (width <= DEVICE_RANGES.laptop.max) return "laptop";
  if (width <= DEVICE_RANGES.desktop.max) return "desktop";
  if (width <= DEVICE_RANGES.largeDesktop.max) return "largeDesktop";
  return "tv";
};

// src/hooks/useMedia.js
var useMedia = () => {
  const [device, setDevice] = useState(() => {
    if (typeof window !== "undefined") {
      return getDevice(window.innerWidth);
    }
    return "desktop";
  });
  const handleResize = useCallback(() => {
    setDevice(getDevice(window.innerWidth));
  }, []);
  useEffect(() => {
    setDevice(getDevice(window.innerWidth));
    let timeoutId;
    const debouncedResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(handleResize, 100);
    };
    window.addEventListener("resize", debouncedResize);
    return () => {
      window.removeEventListener("resize", debouncedResize);
      clearTimeout(timeoutId);
    };
  }, [handleResize]);
  return {
    device,
    isMobile: device === "mobile",
    isTablet: device === "tablet",
    isLaptop: device === "laptop",
    isDesktop: device === "desktop",
    isLargeDesktop: device === "largeDesktop",
    isTV: device === "tv"
  };
};

// src/hooks/useCurrentDevice.js
import { useState as useState2, useEffect as useEffect2 } from "react";
var useCurrentDevice = () => {
  const [device, setDevice] = useState2(getDevice(window.innerWidth));
  useEffect2(() => {
    const onResize = () => setDevice(getDevice(window.innerWidth));
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return device;
};

// src/components/Media.js
import React from "react";
var Media = (_a) => {
  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
  const media = useMedia();
  for (const key of Object.keys(props)) {
    if (media[`is${key[0].toUpperCase() + key.slice(1)}`]) {
      return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
    }
  }
  return null;
};
var Media_default = Media;
export {
  Media_default as Media,
  useCurrentDevice,
  useMedia
};