Window Size

Docs

Window Size

Track the dimensions of the browser window

About

The useWindowSize hook retrieves and tracks the dimensions of the browser window within a React component. It attaches an event listener to the “resize” event, ensuring that the size updates dynamically whenever the window is resized. The hook returns the “size” object, enabling components to access and utilize the window dimensions for purposes like responsive layout adjustments, conditional rendering, or space-based calculations.

Return Values

Name	Type	Description
width	number	The current width of the window, in pixels.
height	number	The current height of the window, in pixels.

Installation

Run the following command:

npx scriptkavi-hooks@latest add window-size

Usage

import { useWindowSize } from "@/hooks/window-size"

import * as React from "react"
 
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>
  )
}

Window Scroll Breadth First Search