useWindowSize
A React Hook that helps to track window height and innerWidth, and optionnally listen orientation media query.
Demo
Try to resize the window to see the effect.
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const size = useWindowSize(options)
Options
export interface UseWindowSizeOptions {
/**
* The initial width of the window.
*
* @defaultValue Number.POSITIVE_INFINITY
*/
initialWidth?: number
/**
* The initial height of the window.
*
* @defaultValue Number.POSITIVE_INFINITY
*/
initialHeight?: number
/**
* Whether to listen to orientation changes.
*
* @defaultValue true
*/
listenOrientation?: boolean
/**
* Whether to include the scrollbar width.
*
* @defaultValue true
*/
includeScrollbar?: boolean
}
Returns
export interface WindowSize {
width: number
height: number
}
export interface UseWindowSizeReturns extends Size {
/**
* Update the window size.
*/
update(): void
}
