UseWindowSize

Last updated: 3.0.0 (04/07/2024)

useWindowSize is a hook that provides the current width and height of the browser window. It automatically updates when the window is resized.

Usage

import { useWindowSize, Text } from "@valence-ui/core";

function MyComponent() { 
    const { width, height } = useWindowSize();
    
    return ( 
        <Text>
            Window size: {width}px × {height}px
        </Text>
    )
}

Responsive layouts

This hook is useful for creating responsive layouts that need to respond to the exact window dimensions:

import { useWindowSize, Flex, Text } from "@valence-ui/core";

function MyComponent() { 
    const { width } = useWindowSize();
    
    const columns = width > 1200 ? 4 : width > 800 ? 3 : width > 500 ? 2 : 1;
    
    return ( 
        <Flex>
            <Text>
                Showing {columns} columns
            </Text>
        </Flex>
    )
}

For most responsive use cases, consider using the UseBreakpoint hook or the Responsiveness system instead. useWindowSize is best used when you need exact pixel values rather than breakpoint-based logic.

Return type

Attribute	Type	Description
width	number	The current width of the window.
height	number	The current height of the window.