@primer/react-brand/esm/hooks/useWindowSize.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import { useEffect as e, useState as t } from "react";
//#region src/hooks/useWindowSize.ts
var n = /* @__PURE__ */ function(e) {
	return e.XSMALL = "xsmall", e.SMALL = "small", e.MEDIUM = "medium", e.LARGE = "large", e.XLARGE = "xlarge", e.XXLARGE = "xxlarge", e;
}({});
function r() {
	let [n, r] = t({
		width: void 0,
		height: void 0,
		isXSmall: void 0,
		isSmall: void 0,
		isMedium: void 0,
		isLarge: void 0,
		isXLarge: void 0,
		isXXLarge: void 0,
		currentBreakpointSize: void 0
	});
	return e(() => {
		function e() {
			r({
				width: window.innerWidth,
				height: window.innerHeight,
				isXSmall: window.innerWidth >= 320,
				isSmall: window.innerWidth >= 544,
				isMedium: window.innerWidth >= 768,
				isLarge: window.innerWidth >= 1012,
				isXLarge: window.innerWidth >= 1280,
				isXXLarge: window.innerWidth >= 1440,
				currentBreakpointSize: i(window.innerWidth)
			});
		}
		return window.addEventListener("resize", e), e(), () => window.removeEventListener("resize", e);
	}, []), n;
}
var i = (e) => {
	let t = n.XXLARGE;
	switch (!0) {
		case e >= 320 && e < 544:
			t = n.XSMALL;
			break;
		case e >= 544 && e < 768:
			t = n.SMALL;
			break;
		case e >= 768 && e < 1012:
			t = n.MEDIUM;
			break;
		case e >= 1012 && e < 1280:
			t = n.LARGE;
			break;
		case e >= 1280 && e < 1440:
			t = n.XLARGE;
			break;
		default: t = n.XXLARGE;
	}
	return t;
};
//#endregion
export { n as BreakpointSize, r as useWindowSize };

//# sourceMappingURL=useWindowSize.js.map