npm i @react-hook/window-size
React hooks for updating components when the size or orientation of the window
changes. These hooks come in two forms: debounced
using useDebounce()
and throttled using useThrottle().
Quick Start
Check out the example on CodeSandbox
//
// Debounced values
import {
useWindowSize,
useWindowWidth,
useWindowHeight,
} from '@react-hook/window-size'
const Component = (props) => {
const [width, height] = useWindowSize()
const onlyWidth = useWindowWidth()
const onlyHeight = useWindowHeight()
}
//
// Throttled values
import {
useWindowSize,
useWindowWidth,
useWindowHeight,
} from '@react-hook/window-size/throttled'
const Component = (props) => {
const [width, height] = useWindowSize()
const onlyWidth = useWindowWidth()
const onlyHeight = useWindowHeight()
}API
useWindowSize(options?): [number, number]
A hook that returns the current width and height of the window. This hook is debounced, meaning it will
wait (100ms by default) for the resize events to stop firing before it actually updates its state with
the new width and height.
Options
DebouncedWindowSizeOptions
| Key |
Type |
Default |
Description |
| wait |
number |
100 |
The amount of time in ms you want to wait after the latest resize event before updating the size of the window in state. |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to debouncing any additional events. |
| initialWidth |
number |
0 |
The initial width to use when there is no window object, e.g. SSR |
| initialHeight |
number |
0 |
The initial height to use when there is no window object, e.g. SSR |
Returns [width: number, height: number]
|
Type |
Description |
| width |
number |
The current clientWidth of the window |
| height |
number |
The current clientHeight of the window |
useWindowWidth(options?): number
A hook that returns the current width of the window. This hook is debounced, meaning it will
wait (100ms by default) for the resize events to stop firing before it actually updates its state with
the new width.
Options
DebouncedWindowSizeOptions
| Key |
Type |
Default |
Description |
| wait |
number |
100 |
The amount of time in ms you want to wait after the latest resize event before updating the size of the window in state. |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to debouncing any additional events. |
| initialWidth |
number |
0 |
The initial width to use when there is no window object, e.g. SSR |
Returns width: number
|
Type |
Description |
| width |
number |
The current clientWidth of the window |
useWindowHeight(options?): number
A hook that returns the current height of the window. This hook is debounced, meaning it will
wait (100ms by default) for the resize events to stop firing before it actually updates its state with
the new height.
Options
DebouncedWindowSizeOptions
| Key |
Type |
Default |
Description |
| wait |
number |
100 |
The amount of time in ms you want to wait after the latest resize event before updating the size of the window in state. |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to debouncing any additional events. |
| initialHeight |
number |
0 |
The initial height to use when there is no window object, e.g. SSR |
Returns height: number
|
Type |
Description |
| height |
number |
The current clientHeight of the window |
Throttled API
To use these throttled hooks instead of debounced hooks, import with import {...} from '@react-hook/window-size/throttled
useWindowSize(options?): [number, number]
A hook that returns the current width and height of the window. This hook is throttled, meaning it will
only update its state at most 30fps (by default, configuration below) with the new width and height
of the window. It will always update at the trailing edge, so you don't have to worry about not having
the correct width or height after the window is finished resizing. It will also update at the leading edge
if configured to do so.
Options
ThrottledWindowSizeOptions
| Key |
Type |
Default |
Description |
| fps |
number |
30 |
The rate in frames per second at which the size of the window is updated |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to throttling any additional events. |
| initialWidth |
number |
0 |
The initial width to use when there is no window object, e.g. SSR |
| initialHeight |
number |
0 |
The initial height to use when there is no window object, e.g. SSR |
Returns [width: number, height: number]
|
Type |
Description |
| width |
number |
The current clientWidth of the window |
| height |
number |
The current clientHeight of the window |
useWindowWidth(options?): number
A hook that returns the current width of the window. This hook is throttled, meaning it will
only update its state at most 30fps (by default, configuration below) with the new width of the window.
It will always update at the trailing edge, so you don't have to worry about not having
the correct width after the window is finished resizing. It will also update at the leading edge
if configured to do so.
Options
ThrottledWindowSizeOptions
| Key |
Type |
Default |
Description |
| fps |
number |
30 |
The rate in frames per second at which the size of the window is updated |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to throttling any additional events. |
| initialWidth |
number |
0 |
The initial width to use when there is no window object, e.g. SSR |
Returns width: number
|
Type |
Description |
| width |
number |
The current clientWidth of the window |
useWindowHeight(options?): number
A hook that returns the current height of the window. This hook is throttled, meaning it will
only update its state at most 30fps (by default, configuration below) with the new height of the window.
It will always update at the trailing edge, so you don't have to worry about not having
the correct height after the window is finished resizing. It will also update at the leading edge
if configured to do so.
Options
ThrottledWindowSizeOptions
| Key |
Type |
Default |
Description |
| fps |
number |
30 |
The rate in frames per second at which the size of the window is updated |
| leading |
boolean |
false |
When true, updates the size of the window on the leading edge (right away) in addition to throttling any additional events. |
| initialHeight |
number |
0 |
The initial height to use when there is no window object, e.g. SSR |
Returns height: number
|
Type |
Description |
| height |
number |
The current clientHeight of the window |
LICENSE
MIT
