useWindowSize

This hook allows you to track the current width and height of the browser window in pixels. When the window is resized, these values will automatically update.

Installation

1. Make sure you have @ridgehkr/useful installed in your application. If not, you can get started by following the installation instructions.

2. Import useWindowSize into your component.

import { useWindowSize } from '@ridgehkr/useful'

Usage

The useWindowSize hook doesn't take any parameters. It returns an object with the current width and height in pixels of the browser window. The following is a basic example that displays the current window size:

import { useWindowSize } from '@ridgehkr/useful'
 
function WindowSize() {
  const { width, height } = useWindowSize()
 
  return (
    <div>
      <p>
        Window width: <strong>{width}</strong>
      </p>
      <p>
        Window height: <strong>{height}</strong>
      </p>
      <p>Resize the window to see how the width and height values change.</p>
    </div>
  )
}

API Reference

Hook Signature

useWindowSize(): WindowSize

Parameters

useWindowSize does not accept any parameters.

Return Value

The hook returns a WindowSize object with the following properties: