useDimensions – a React Hook to measure DOM nodes

import React from 'react'
import useDimensions from 'react-use-dimensions'

const MeasuredNode = () => {
    const [ref, { x, y, width, height }] = useDimensions();

    return (
        <p ref={ref}>
            I am a paragraph at ({x}px, {y}px) position with a width of {width}px
            and height of {height}px
        </p>
    );
};

Handy. Uses window.resize+window.scroll internally, yet I’m quite sure it could be done using the more modern ResizeObserver+IntersectionObserver too.

useDimensions demo →
useDimensions Source (GitHub) →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.