36 lines
891 B
TypeScript
36 lines
891 B
TypeScript
import { debounce } from "lodash";
|
|
import * as React from "react";
|
|
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 = React.useMemo(
|
|
() =>
|
|
debounce(() => {
|
|
// Set window width/height to state
|
|
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;
|
|
}
|