use-breakpoint-agent
Version:
A React hook to detect device type based on screen width
38 lines (37 loc) • 1.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreakpointAgent = void 0;
const react_1 = require("react");
const types_1 = require("../types/index.js");
const shim_1 = require("use-sync-external-store/shim");
const client_1 = require("../client.js");
const default_1 = require("../lib/default.js");
const useBreakpointAgent = (initialServer = undefined, breakpoints) => {
const resize = (0, react_1.useRef)(false);
const firstWidth = (0, react_1.useRef)(null);
const { mobile, tablet } = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, default_1.defaultBreakpoints), breakpoints)), [breakpoints]);
const subscribe = (0, react_1.useCallback)((listener) => {
window.addEventListener("resize", listener);
return () => window.removeEventListener("resize", listener);
}, []);
const getSnapshot = (0, react_1.useCallback)(() => {
if (!firstWidth.current)
firstWidth.current = window.innerWidth;
if (!resize.current && firstWidth.current !== window.innerWidth) {
resize.current = true;
const w = window;
w.__breakpointAgent = { firstWidth: firstWidth.current, resize: true };
}
if (!resize.current)
return (0, client_1.getDeviceTypeFromString)(navigator.userAgent);
const width = window.innerWidth;
if (width <= mobile)
return types_1.DeviceEnum.MOBILE;
if (width < tablet)
return types_1.DeviceEnum.TABLET;
return types_1.DeviceEnum.DESKTOP;
}, [mobile, tablet]);
const getServerSnapshot = (0, react_1.useCallback)(() => initialServer !== null && initialServer !== void 0 ? initialServer : null, [initialServer]);
return (0, shim_1.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
};
exports.useBreakpointAgent = useBreakpointAgent;