use-breakpoint-agent
Version:
A React hook to detect device type based on screen width
29 lines (28 loc) • 1.38 kB
JavaScript
import { DeviceEnum } from "../types/index.js";
import { getDeviceTypeFromString } from "../client.js";
import { defaultBreakpoints } from "../lib/default.js";
export const getBreakpointAgent = (serverDevice = undefined, breakpoints) => {
const { mobile, tablet } = Object.assign(Object.assign({}, defaultBreakpoints), breakpoints);
const getSnapshot = () => {
var _a;
const w = window;
if (!w.__breakpointAgent) {
w.__breakpointAgent = { firstWidth: window.innerWidth, resize: false };
window.addEventListener("resize", () => {
var _a;
if (((_a = w.__breakpointAgent) === null || _a === void 0 ? void 0 : _a.firstWidth) !== window.innerWidth)
w.__breakpointAgent.resize = true;
});
}
if (!((_a = w.__breakpointAgent) === null || _a === void 0 ? void 0 : _a.resize))
return getDeviceTypeFromString(navigator.userAgent);
const width = window.innerWidth;
if (width <= mobile)
return DeviceEnum.MOBILE;
if (width < tablet)
return DeviceEnum.TABLET;
return DeviceEnum.DESKTOP;
};
const getServerSnapshot = () => serverDevice !== null && serverDevice !== void 0 ? serverDevice : null;
return typeof window === "undefined" ? getServerSnapshot() : getSnapshot();
};