@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 k } from "react/jsx-runtime";
import { createContext as S, useState as u, useMemo as g, useEffect as c, useContext as B } from "react";
import { useLayoutContainer as M } from "./LayoutContainerContext.js";
const w = {
  xs: 320,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  "2xl": 1536
}, E = {
  width: 0,
  height: 0,
  isMobile: !1,
  currentBreakpoint: "xs",
  orientation: "portrait",
  breakpoints: w,
  isBreakpoint: () => !1,
  isMobileDevice: !1,
  isPortrait: !0,
  isLandscape: !1,
  isSmallScreen: !1
}, m = S(void 0), O = ({
  children: l,
  mobileWidth: p = 768,
  onLayoutWidthChange: s
}) => {
  const [a, b] = u(!1), { container: t } = M(), [r, f] = u({
    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 = g(() => ({
    ...w,
    md: p
  }), [p]), h = (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";
  }, x = () => {
    const e = navigator.userAgent.toLowerCase();
    return ["iphone", "ipod", "ipad", "android", "mobile", "phone", "tablet"].some((i) => e.includes(i));
  };
  c(() => {
    const e = r.width <= n.md;
    b(e);
  }, [r, n]), c(() => {
    s && s(a, r.width);
  }, [s, a, r]), c(() => {
    if (!t)
      return;
    const e = () => {
      const i = t.clientWidth, d = t.clientHeight;
      f({
        width: i,
        height: d,
        isMobile: x(),
        currentBreakpoint: h(i),
        orientation: d > 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 v = {
    ...r,
    breakpoints: n,
    isBreakpoint: (e) => r.width >= n[e],
    isMobileDevice: r.isMobile,
    isPortrait: r.orientation === "portrait",
    isLandscape: r.orientation === "landscape",
    isSmallScreen: a
  };
  return /* @__PURE__ */ k(m.Provider, { value: v, children: l });
}, V = () => B(m) ?? E;
export {
  O as ViewportProvider,
  V as useViewportContext
};