39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import * as React from "react";
|
|
import useEventListener from "./useEventListener";
|
|
import useThrottledCallback from "./useThrottledCallback";
|
|
|
|
/**
|
|
* A debounced hook that listens to the window resize event and returns the
|
|
* size of the current window.
|
|
*
|
|
* @returns An object containing width and height of the current window
|
|
*/
|
|
export default function useWindowSize() {
|
|
const [windowSize, setWindowSize] = React.useState({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
|
|
const handleResize = useThrottledCallback(() => {
|
|
setWindowSize((state) => {
|
|
if (
|
|
window.innerWidth === state.width &&
|
|
window.innerHeight === state.height
|
|
) {
|
|
return state;
|
|
}
|
|
|
|
return { width: window.innerWidth, height: window.innerHeight };
|
|
});
|
|
}, 100);
|
|
|
|
useEventListener("resize", handleResize);
|
|
|
|
// Call handler right away so state gets updated with initial window size
|
|
React.useEffect(() => {
|
|
handleResize();
|
|
}, [handleResize]);
|
|
|
|
return windowSize;
|
|
}
|