useWindowSize

Track the dimensions of the browser window with useWindowSize.

Install:

npm i @uidotdev/usehooks

Description:

The useWindowSize hook is a useful for retrieving and tracking the dimensions of the browser window within a React component. It attaches an event listener to the “resize” event, ensuring that the size is updated dynamically whenever the window is resized. The hook returns the “size” object, enabling components to access and utilize the window dimensions for various purposes, such as responsive layout adjustments, conditional rendering, or calculations based on the available space.

Return Value

The useWindowSize hook returns an object with the following properties:

NameTypeDescription
widthnumberThe current width of the window, in pixels.
heightnumberThe current height of the window, in pixels.

Demo:

Example:

More Hooks:

Sort: