@ozen-ui/kit
Version:
React component library
43 lines (42 loc) • 1.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreakpointsObserver = useBreakpointsObserver;
var react_1 = require("react");
var OzenProvider_1 = require("../../components/OzenProvider");
var breakpoint_1 = require("../../utils/breakpoint");
var useEventListener_1 = require("../useEventListener");
var useIsomorphicEffect_1 = require("../useIsomorphicEffect");
var useStoredValue_1 = require("../useStoredValue");
var useTheme_1 = require("../useTheme");
function useBreakpointsObserver(onChange) {
var ssr = (0, OzenProvider_1.useOzenSSR)();
var theme = (0, useTheme_1.useTheme)();
var breakpointToken = theme.tokens.breakpoint;
var matches = (0, useStoredValue_1.useStoredValue)(function () {
if (ssr.config.isEnabled) {
return (0, breakpoint_1.calculateBreakpoints)(breakpointToken, ssr.config.serverWidth);
}
return (0, breakpoint_1.calculateBreakpoints)(breakpointToken, window.innerWidth);
});
var recalculateMatches = function (width) {
var newMatches = (0, breakpoint_1.calculateBreakpoints)(breakpointToken, width);
var hasChanges = newMatches.currentBreakpoint !== matches.current.currentBreakpoint;
if (hasChanges) {
matches.current = newMatches;
onChange === null || onChange === void 0 ? void 0 : onChange(newMatches, width);
}
};
(0, react_1.useEffect)(function () {
recalculateMatches(window.innerWidth);
}, [theme]);
(0, useEventListener_1.useEventListener)({
eventName: 'resize',
handler: function () {
recalculateMatches(window.innerWidth);
},
});
(0, useIsomorphicEffect_1.useIsomorphicEffect)(function () {
recalculateMatches(window.innerWidth);
}, []);
return matches;
}