useWindowSize()

useWindowSize(debounce?): object

Defined in: src/hooks/dom/useWindowSize.ts:48

A custom React hook to track the current window size. Automatically updates whenever the window is resized.

Parameters

debounce?

number = 0

The debounce delay in milliseconds for the resize event. Defaults to 0 (no debounce).

Returns

object

An object containing the current window width and height.

width

width: number

height

height: number

Examples

import { useWindowSize } from '@zl-asica/react';

const MyComponent = () => {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};

with debounce:

import { useWindowSize } from '@zl-asica/react';

const MyComponent = () => {
  const { width, height } = useWindowSize(300); // Update size with 300ms debounce

  return (
    <div>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
};