@pdf-viewer/react/dist/contexts/ViewportContext.js

A react-pdf-viewer component for React and Next.js. Suitable for react-pdf document.

import { jsx as f } from "react/jsx-runtime";
import { createContext as g, useState as w, useMemo as S, useEffect as d, useContext as k } from "react";
import { useLayoutContainer as E } from "./LayoutContainerContext.js";
const B = {
  xs: 320,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  "2xl": 1536
}, u = g(void 0), A = ({
  children: s,
  mobileWidth: l = 768,
  onLayoutWidthChange: c
}) => {
  const [a, m] = w(!1), { container: t } = E(), [r, h] = w({
    width: (t == null ? void 0 : t.clientWidth) || window.innerWidth,
    height: (t == null ? void 0 : t.clientHeight) || window.innerHeight,
    isMobile: !1,
    currentBreakpoint: "xs",
    orientation: "portrait"
  }), n = S(() => ({
    ...B,
    md: l
  }), [l]), b = (e) => {
    const o = Object.entries(n);
    for (let i = o.length - 1; i >= 0; i--)
      if (e >= o[i][1])
        return o[i][0];
    return "xs";
  }, v = () => {
    const e = navigator.userAgent.toLowerCase();
    return ["iphone", "ipod", "ipad", "android", "mobile", "phone", "tablet"].some((i) => e.includes(i));
  };
  d(() => {
    const e = r.width <= n.md;
    m(e);
  }, [r, n]), d(() => {
    c && c(a, r.width);
  }, [c, a, r]), d(() => {
    if (!t)
      return;
    const e = () => {
      const i = t.clientWidth, p = t.clientHeight;
      h({
        width: i,
        height: p,
        isMobile: v(),
        currentBreakpoint: b(i),
        orientation: p > i ? "portrait" : "landscape"
      });
    };
    e();
    const o = new ResizeObserver(e);
    return o.observe(t), window.addEventListener("resize", e), () => {
      o.disconnect(), window.removeEventListener("resize", e);
    };
  }, [t]);
  const x = {
    ...r,
    breakpoints: n,
    isBreakpoint: (e) => r.width >= n[e],
    isMobileDevice: r.isMobile,
    isPortrait: r.orientation === "portrait",
    isLandscape: r.orientation === "landscape",
    isSmallScreen: a
  };
  return /* @__PURE__ */ f(u.Provider, { value: x, children: s });
}, O = () => {
  const s = k(u);
  if (s === void 0)
    throw new Error("useViewportContext must be used within a ViewportProvider");
  return s;
};
export {
  A as ViewportProvider,
  O as useViewportContext
};