36 lines
946 B
TypeScript
36 lines
946 B
TypeScript
import * as React from "react";
|
|
import useDebouncedCallback from "./useDebouncedCallback";
|
|
import useEventListener from "./useEventListener";
|
|
|
|
/**
|
|
* 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 = useDebouncedCallback(() => {
|
|
if (
|
|
window.innerWidth !== windowSize.width ||
|
|
window.innerHeight !== windowSize.height
|
|
) {
|
|
setWindowSize({
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
});
|
|
}
|
|
}, 100);
|
|
|
|
useEventListener("resize", handleResize);
|
|
|
|
// Call handler right away so state gets updated with initial window size
|
|
handleResize();
|
|
|
|
return windowSize;
|
|
}
|