@wordpress/compose
Version:
WordPress higher-order components (HOCs).
42 lines (41 loc) • 1.38 kB
JavaScript
// packages/compose/src/hooks/use-viewport-match/index.ts
import { createContext, useContext } from "@wordpress/element";
import useMediaQuery from "../use-media-query/index.mjs";
var BREAKPOINTS = {
xhuge: 1920,
huge: 1440,
wide: 1280,
xlarge: 1080,
large: 960,
medium: 782,
small: 600,
mobile: 480
};
var CONDITIONS = {
">=": "min-width",
"<": "max-width"
};
var OPERATOR_EVALUATORS = {
">=": (breakpointValue, width) => width >= breakpointValue,
"<": (breakpointValue, width) => width < breakpointValue
};
var ViewportMatchWidthContext = createContext(null);
ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
const simulatedWidth = useContext(ViewportMatchWidthContext);
const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
if (simulatedWidth) {
return OPERATOR_EVALUATORS[operator](
BREAKPOINTS[breakpoint],
simulatedWidth
);
}
return mediaQueryResult;
};
useViewportMatch.__experimentalWidthProvider = ViewportMatchWidthContext.Provider;
var use_viewport_match_default = useViewportMatch;
export {
use_viewport_match_default as default
};
//# sourceMappingURL=index.mjs.map