UseElementSize

Last updated: 3.0.0 (04/07/2024)

useElementSize is a hook that provides the current width and height of an element. It automatically updates when the window is resized.

Usage

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

function MyComponent() { 
    const { ref, width, height } = useElementSize();
    
    return ( 
        <Flex ref={ref}>
            <Text>
                Width: {width}px, Height: {height}px
            </Text>
        </Flex>
    )
}

The ref returned by this hook should be attached to the element you want to measure. The width and height values will update automatically when the window is resized.

Return type

Attribute	Type	Description
ref	RefObject<HTMLElement>	A ref object that should be attached to the element you want to measure.
width	number	The current width of the element.
height	number	The current height of the element.