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:
| Name | Type | Description |
|---|---|---|
| width | number | The current width of the window, in pixels. |
| height | number | The current height of the window, in pixels. |
Demo:
Example:
import * as React from "react";
import { useWindowSize } from "@uidotdev/usehooks";
function Browser({ size }) {
return (
<div
data-testid="browser"
className="browser"
style={{ width: size.width / 4, height: size.height / 4 }}
/>
);
}
export default function App() {
const size = useWindowSize();
return (
<section>
<h1>useWindowSize</h1>
<p>Resize the window</p>
<table>
<tbody>
<tr>
<th>width</th>
<td>{size.width}</td>
</tr>
<tr>
<th>height</th>
<td>{size.height}</td>
</tr>
</tbody>
</table>
<Browser size={size} />
</section>
);
}