useWindowSize

React hook to track the dimensions of the browser window.

Add the hook via the CLI:

npm

npx @novajslabs/cli add useWindowSize

yarn

npx @novajslabs/cli add useWindowSize

pnpm

pnpm dlx @novajslabs/cli add useWindowSize

Or copy and paste the code into your project:

TypeScript

import { useState, useEffect } from "react";

type WindowSize = {
  width: number;
  height: number;
};

export const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
};

JavaScript

import { useState, useEffect } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
};

Requirements

React 16.8 or higher

Return values

width

Type: number

The current width of the browser window in pixels.

height

Type: number

The current height of the browser window in pixels.

Example

import { useWindowSize } from "./hooks/useWindowSize";

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

  return (
    <div className={`${width > 1200 ? "w-96" : "w-56"}`}>Some content</div>
  );
};

export default App;

Use cases

Here are some use cases where this React hook is useful:

• Dynamically resizing elements or components based on changes in the viewport size
• Adapting the display of content or media based on the available screen space in a mobile-responsive website
• Implementing conditional rendering of UI elements for different device sizes in a cross-platform application
• Adjusting the positioning or alignment of elements based on changes in the browser window dimensions for improved user experience