useWindowSize

Track the dimensions of the browser window.

https://www.shaktools.com/shak-hooks
Browser

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useWindowSize } from "@shak-hooks/usehooks";
Source: packages/react/src/useWindowSize.ts

Signature

signature.ts
export function useWindowSize(): WindowSize

Parameters

No parameters.

Returns

WindowSize

Exported Types

types.ts
1export interface WindowSize {
2 width: number;
3 height: number;
4}

Implementation

use-window-size.ts
1import { useState, useEffect } from "react";
2
3export function useWindowSize() {
4 const [windowSize, setWindowSize] = useState({
5 width: typeof window !== "undefined" ? window.innerWidth : 0,
6 height: typeof window !== "undefined" ? window.innerHeight : 0,
7 });
8
9 useEffect(() => {
10 function handleResize() {
11 setWindowSize({
12 width: window.innerWidth,
13 height: window.innerHeight,
14 });
15 }
16
17 window.addEventListener("resize", handleResize);
18 handleResize();
19
20 return () => window.removeEventListener("resize", handleResize);
21 }, []);
22
23 return windowSize;
24}

Advertisement

Google Ads

Usage

example.tsx
1import { useWindowSize } from "@shak-hooks/usehooks";
2
3const result = useWindowSize();
4// result: WindowSize
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy