@datalayer/core
Version:
**Datalayer Core**
75 lines (74 loc) • 3.15 kB
JavaScript
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { useState, useEffect } from 'react';
export var BreakpointSize;
(function (BreakpointSize) {
BreakpointSize["XSMALL"] = "xsmall";
BreakpointSize["SMALL"] = "small";
BreakpointSize["MEDIUM"] = "medium";
BreakpointSize["LARGE"] = "large";
BreakpointSize["XLARGE"] = "xlarge";
BreakpointSize["XXLARGE"] = "xxlarge";
})(BreakpointSize || (BreakpointSize = {}));
export function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: undefined, // undefined to avoid client/server mismatch on initial mount
height: undefined, // undefined to avoid client/server mismatch on initial mount,
isXSmall: undefined, // undefined to avoid client/server mismatch on initial mount,
isSmall: undefined, // undefined to avoid client/server mismatch on initial mount,
isMedium: undefined, // undefined to avoid client/server mismatch on initial mount,
isLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
isXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
isXXLarge: undefined, // undefined to avoid client/server mismatch on initial mount,
currentBreakpointSize: undefined, // undefined to avoid client/server mismatch on initial mount,
});
useEffect(() => {
// should only execute all the code below on client
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
/*
* Maps to large breakpoint
* TODO: replace with design token. Requires remToPx util.
*/
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: breakpointSwitch(window.innerWidth),
});
}
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
}
const breakpointSwitch = (value) => {
let current = BreakpointSize.XXLARGE;
switch (true) {
case value >= 320 && value < 544:
current = BreakpointSize.XSMALL;
break;
case value >= 544 && value < 768:
current = BreakpointSize.SMALL;
break;
case value >= 768 && value < 1012:
current = BreakpointSize.MEDIUM;
break;
case value >= 1012 && value < 1280:
current = BreakpointSize.LARGE;
break;
case value >= 1280 && value < 1440:
current = BreakpointSize.XLARGE;
break;
default:
current = BreakpointSize.XXLARGE;
}
return current;
};