React useElementSize Hook: Track Element Width & Height With ResizeObserver

Introduction

In modern web development, understanding where elements are positioned and their dimensions is crucial for creating responsive designs. The article "React useElementSize Hook: Track Element Width & Height with ResizeObserver" discusses how the useElementSize hook can be used to track a DOM element’s width and height dynamically as they change during execution of a React component, utilizing the ResizeObserver.

What is the Purpose of Media Queries?

Media queries are primarily designed to detect changes in the viewport size and adjust styles accordingly. However, media queries do not account for dynamic changes in elements’ dimensions within those components.

Enter useElementSize

With this hook, developers can extend React’s capabilities by detecting when an element’s width or height has changed independently of the viewport resizing event. This can be particularly useful for animations that need to adjust based on the size of a container during user interactions.

How Does useElementSize Work?

#### Step 1: Define the Hook

The useElementSize hook makes use of the ResizeObserver, a built-in browser API that allows tracking changes in the dimensions and layout properties of an element. This is done by creating a ResizeObserver instance which observes the provided DOM node.

import { useElementSize } from 'react-use-element-size';

function MyComponent() {
  const size = useElementSize(ref.current);

  return (
    <div ref={ref} style={{ width: '100px', height: '50px' }}>
      Dynamic Content Here!
    </div>
  );
}

#### Step 2: Accessing the Sizing Data

The useElementSize hook returns an object with two properties, width and height, reflecting the current size of the element. This data can then be used to conditionally display elements or apply styles based on those dimensions.

function MyComponent() {
  const { width } = useElementSize(ref.current);

  return (
    <div style={{ background: 'lightgrey', height: `${width}px` }}>
      My component is now ${width} pixels wide!
    </div>
  );
}

Integrating with Conditional Rendering

You can conditionally render elements or apply different styles based on these size changes. For instance, you might want to hide an element when it becomes too small, showing a spinner in its place.

function LoadingSpinner() {
  return <div>Loading...</div>;
}

function MyComponent({ loading }) {
  const { width } = useElementSize(ref.current);

  if (width > 100) {
    return (
      <p>Content is visible!</p>
    );
  }

  return loading ? (
    <LoadingSpinner />
  ) : null;
}

Conclusion

The useElementSize hook provides a flexible and efficient way to monitor the size of an element within your React components, even if those elements are not resized via media queries. By leveraging the power of ResizeObserver, developers can create more interactive and responsive interfaces that adapt dynamically based on user interactions or other programmatic changes.