Skip to content

Latest commit

 

History

History
 
 

window-size

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
test
test
 
 
throttled
throttled
 
 
types
types
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
babel.config.js
babel.config.js
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
yarn.lock
yarn.lock
 
 

README.md

useWindowSize()

Bundlephobia Types Build status NPM Version MIT License 

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

Type Required? Description
options DebouncedWindowSizeOptions No Options for configuring the hook. See DebouncedWindowSizeOptions below.

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

Type Required? Description
options DebouncedWindowSizeOptions No Options for configuring the hook. See DebouncedWindowSizeOptions below.

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

Type Required? Description
options DebouncedWindowSizeOptions No Options for configuring the hook. See DebouncedWindowSizeOptions below.

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

Type Required? Description
options ThrottledWindowSizeOptions No Options for configuring the hook. See ThrottledWindowSizeOptions below.

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

Type Required? Description
options ThrottledWindowSizeOptions No Options for configuring the hook. See ThrottledWindowSizeOptions below.

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

Type Required? Description
options ThrottledWindowSizeOptions No Options for configuring the hook. See ThrottledWindowSizeOptions below.

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