use-screen-size/dist/use-screen-size.es.js

A React hook to get the current screen size and breakpoint or write conditional code based on screen size

import { useCallback as m, useState as d, useEffect as w, useMemo as x } from "react";
const t = {
  xs: "xs",
  s: "s",
  m: "m",
  l: "l",
  xl: "xl"
}, S = {
  xs: 576,
  s: 768,
  m: 992,
  l: 1200,
  xl: 1 / 0
}, z = (n = S, u = 250) => {
  const i = typeof window < "u" && window !== null, l = m(() => {
    const e = i ? window.innerWidth : 0, r = i ? window.innerHeight : 0;
    let s = t.xl;
    return e < n.xs ? s = t.xs : e < n.s ? s = t.s : e < n.m ? s = t.m : e < n.l && (s = t.l), { width: e, height: r, screen: s };
  }, [i, n]), [c, o] = d(l);
  w(() => {
    if (!i)
      return;
    let e;
    function r() {
      clearTimeout(e), e = setTimeout(() => {
        o(l());
      }, u);
    }
    return window.addEventListener("resize", r), () => {
      window.removeEventListener("resize", r), clearTimeout(e);
    };
  }, [i, l, u]);
  const f = x(() => {
    const { width: e } = c;
    return e < n.xs ? t.xs : e < n.s ? t.s : e < n.m ? t.m : e < n.l ? t.l : t.xl;
  }, [c, n]);
  return {
    ...c,
    screen: f
  };
};
export {
  t as BreakPoint,
  S as DEFAULT_BREAKPOINTS,
  z as useScreenSize
};