React Element Size Hook: A Comprehensive Tutorial with JSX for Dynamic UIs
Hey there, fellow coder! Have you ever built a stunning UI in React, only to realize it doesn’t quite adapt perfectly to different content sizes? Or perhaps you’ve struggled to make an element truly responsive without knowing its actual dimensions? Well, good news! Today, we are going to fix that together. We’ll craft an amazing custom useElementSize React Hook. This powerful hook will let us effortlessly track any React Element Size in real-time. It’s an indispensable tool for building truly dynamic and adaptive user interfaces, and it’s surprisingly simple to implement!
What We Are Building
Today, our mission is to create a super versatile and reusable React hook! This hook will precisely detect the live width and height of any DOM element you assign it to. Imagine the possibilities! Picture a dynamic card component that elegantly rearranges its internal content as it’s resized. Or perhaps a complex data visualization that instantly adjusts its scales and labels when its container changes size. Our useElementSize hook makes all these scenarios not just possible, but incredibly straightforward to implement! We will also build a simple, interactive demo component to showcase its power. You’ll literally see the dimensions update as you drag and resize it. This project is going to add a truly valuable tool to your React development arsenal!
HTML Structure
In React, our ‘HTML structure’ is really the JSX we write directly within our components. So, for this tutorial, we will primarily be focusing on our JavaScript (JSX) code. We’ll set up a foundational App component. Inside it, we will render a special ResizableBox component. This ResizableBox is the star, as it will be the very element whose dimensions we are keen to track. It’s a straightforward setup that gets us right into the core logic!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React useElementSize Hook Demo</title>
<!-- Apply box-sizing globally for consistent layout -->
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif; /* Safe fonts */
background-color: #1a202c; /* Dark background */
color: #e2e8f0; /* Light text */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
overflow: auto; /* Allow scrolling if content overflows */
}
#root {
width: 100%;
max-width: 800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- The React app will be injected here. In a real project, you'd usually use a build step (like Create React App) that generates a bundled JS file.
For a direct browser setup, ensure your main JS file is linked here with type="module". -->
<script type="module" src="./src/index.js"></script>
</body>
</html>CSS Styling
Of course, every great interactive component needs some visual flair! These specific CSS styles are crucial. They define the initial appearance of our ResizableBox. Moreover, they enable its amazing resizable behavior, letting you grab its corner and drag! This visual feedback helps us clearly observe the React Element Size changes in real-time. We’ll make it look clean, functional, and user-friendly. These styles provide the perfect canvas for our powerful custom hook!
src/styles.css
/* General styling for the app container */
.app-container {
background-color: #2d3748; /* Darker grey */
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
text-align: center;
max-width: 100%; /* Ensure it's responsive */
width: 700px;
margin-top: 20px;
margin-bottom: 20px;
}
/* Title styling */
.app-title {
color: #66ccff; /* Bright blue */
font-size: 2.5em;
margin-bottom: 15px;
text-shadow: 0 0 8px rgba(102, 204, 255, 0.6);
}
/* Description text */
.description {
color: #cbd5e0;
font-size: 1.1em;
margin-bottom: 30px;
line-height: 1.6;
}
/* Styles for the resizable box */
.resizable-box {
background-color: #3a475a; /* Slightly lighter dark grey */
border: 2px solid #66ccff; /* Matching blue border */
border-radius: 10px;
padding: 20px;
margin: 30px auto; /* Center the box */
width: 400px; /* Initial width */
height: 250px; /* Initial height */
min-width: 150px; /* Minimum size */
min-height: 100px;
max-width: 90%; /* Responsive max width */
resize: both; /* Allows manual resizing by user */
overflow: auto; /* Required for resize property to work, and hides content if smaller */
box-shadow: 0 0 15px rgba(102, 204, 255, 0.4);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative; /* For the resize handle */
}
.resizable-box p {
margin: 5px 0;
color: #e2e8f0;
font-size: 1.2em;
}
.resizable-box p strong {
color: #a6ffc6; /* Neon green for values */
font-weight: bold;
}
/* Resize handle styling (purely visual, browser handles actual resize) */
.resize-handle {
position: absolute;
bottom: 5px;
right: 5px;
font-size: 1.5em;
color: rgba(255, 255, 255, 0.5);
cursor: nwse-resize; /* Standard resize cursor */
user-select: none; /* Prevent text selection */
}
/* Note text */
.note {
color: #90a4ae;
font-size: 0.9em;
margin-top: 20px;
}
/* Ensure images and other embedded content don't exceed their containers */
img, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
JavaScript
And now, for the heart of our project: the JavaScript! This is where all the magic truly happens, dear reader. We will meticulously craft our custom useElementSize hook, the brain of our operation. Furthermore, we’ll construct the ResizableBox component that elegantly consumes this hook. This code is what brings our element-size-tracking dreams vibrantly to life. Prepare to dive deep into the fascinating world of React hooks and the DOM API! You’re about to unlock some serious UI power.
src/useElementSize.js
import { useState, useEffect, useRef } from 'react';
/**
* @typedef {object} ElementSize
* @property {number} width - The width of the observed element in pixels.
* @property {number} height - The height of the observed element in pixels.
*/
/**
* A React hook that provides the current width and height of a DOM element.
* It uses ResizeObserver for efficient size tracking and updates the size
* whenever the observed element's dimensions change.
*
* @returns {[React.MutableRefObject<HTMLElement | null>, ElementSize]}
* A tuple where the first element is a ref to be attached to the target element,
* and the second element is an object containing the { width, height } of that element.
*
* @example
* // In your component:
* const [myRef, size] = useElementSize();
*
* return (
* <div ref={myRef} style={{ width: '50%', height: '200px', resize: 'both', overflow: 'auto' }}>
* <p>Width: {size.width}px</p>
* <p>Height: {size.height}px</p>
* </div>
* );
*/
function useElementSize() {
// useRef to hold the DOM element we want to observe.
// It will be attached to the element in the consuming component.
const elementRef = useRef(null);
// useState to store and update the element's size.
const [size, setSize] = useState({
width: 0,
height: 0,
});
useEffect(() => {
// Ensure the elementRef is pointing to a valid DOM element.
if (!elementRef.current) {
return;
}
const currentElement = elementRef.current;
// Function to update the size state.
// This is called initially and whenever the observer detects changes.
const updateSize = () => {
if (currentElement) {
// Using clientWidth and clientHeight for inner dimensions (content + padding).
// For a more precise content-box dimension, entry.contentRect from ResizeObserver is ideal.
// This initial update ensures `size` has correct values before first observer callback.
setSize({
width: currentElement.clientWidth,
height: currentElement.clientHeight,
});
}
};
// Initialize size immediately on mount.
// This ensures the initial render has correct dimensions.
updateSize();
// Check if ResizeObserver is supported.
// It's widely supported in modern browsers, but a fallback might be needed for very old ones.
if (typeof ResizeObserver === 'undefined') {
console.warn('ResizeObserver is not supported in this browser. Element size will not update dynamically.');
// For very old browsers, you might add a window.addEventListener('resize', updateSize) here as a fallback,
// but this only captures window size changes, not specific element changes.
return; // Exit if not supported, dynamic updates won't happen.
}
// Create a new ResizeObserver instance.
// The callback function is executed whenever the dimensions of the observed element change.
const resizeObserver = new ResizeObserver(entries => {
// `entries` is an array of `ResizeObserverEntry` objects. Each entry corresponds
// to a single observed element whose size has changed.
for (let entry of entries) {
// Ensure the observed entry corresponds to our target element.
if (entry.target === currentElement) {
// Update the state with the new dimensions from the contentRect.
// `contentRect` provides the size of the element's content box.
setSize({
width: Math.floor(entry.contentRect.width),
height: Math.floor(entry.contentRect.height),
});
}
}
});
// Start observing the current DOM element.
resizeObserver.observe(currentElement);
// Cleanup function:
// This runs when the component unmounts or before the effect re-runs.
return () => {
// Disconnect the observer to stop observing the element
// and prevent memory leaks.
resizeObserver.disconnect();
};
}, []); // Empty dependency array means this effect runs only once on mount and cleans up on unmount.
// Return the ref (to be attached to the target element) and the current size.
return [elementRef, size];
}
export default useElementSize;
src/App.js
import React from 'react';
import useElementSize from './useElementSize'; // Import the custom hook
import './styles.css'; // Import the stylesheet
/**
* Main application component demonstrating the useElementSize hook.
*/
function App() {
// Use the custom hook to get a ref and the element's size.
// Attach 'myDivRef' to the <div> you want to measure.
const [myDivRef, size] = useElementSize();
return (
<div className="app-container">
<h1 className="app-title">React <code>useElementSize</code> Hook Demo</h1>
<p className="description">
Resize the box below using the drag handle (bottom-right) or by resizing your browser window,
and watch its dimensions update dynamically!
</p>
{/* The div to be observed. Attach the ref from the hook here. */}
<div ref={myDivRef} className="resizable-box">
<p>Element Dimensions:</p>
<p>Width: <strong>{size.width}px</strong></p>
<p>Height: <strong>{size.height}px</strong></p>
<div className="resize-handle" aria-hidden="true">⇲</div>
</div>
<p className="note">
This hook leverages <code>ResizeObserver</code> for efficient performance.
</p>
</div>
);
}
export default App;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// Get the root DOM element where our React app will be mounted.
const rootElement = document.getElementById('root');
// Create a React root. This is the new way to render React 18+ apps.
// It enables concurrent features and improves performance.
const root = ReactDOM.createRoot(rootElement);
// Render the App component inside the root.
// React.StrictMode is a tool for highlighting potential problems in an application.
// It activates additional checks and warnings for its descendants.
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
How It All Works Together
The useElementSize Hook
Our useElementSize hook is undeniably the centerpiece of this entire project! It’s designed to be incredibly flexible, accepting a ref as its primary argument. This ref is essentially a pointer to the specific DOM element you wish to observe. Inside our hook, we leverage React’s useState hook. This crucial hook is responsible for maintaining and updating the width and height of our target element. Initially, both dimensions are set to zero, but they’ll update quickly! We also intelligently employ useRef to create a stable, persistent reference for our ResizeObserver instance. This prevents unnecessary re-creations and ensures optimal performance.
Pro Tip: Using
useReffor things likeResizeObserverinstances ensures that the observer doesn’t get re-created on every render. This intelligent approach prevents potential memory leaks and significantly boosts your application’s performance!
The core of our logic resides within a powerful React useEffect Hook: Master Your Component Lifecycles. A useEffect hook is absolutely perfect for managing side effects, such as setting up global event listeners or, in our case, creating observers. Within this useEffect, we carefully define our ResizeObserver. This observer then patiently waits to fire its callback function whenever the element’s size changes. This function is vital! It promptly updates our state with the newly detected dimensions. Consequently, your component gracefully re-renders, always displaying the latest React Element Size. This ensures your UI stays perfectly synchronized and dynamic. If you’re curious about the general concept of custom hooks, CSS-Tricks has a great introduction.
Understanding ResizeObserver
The ResizeObserver API itself is truly a game-changer in web development! It provides an incredibly efficient way to react to changes in an element’s content rectangle. This modern API is vastly superior to older, less performant methods, such as attaching listeners to the global window.resize event. That older event would fire for any window resize, even if your specific element wasn’t affected. However, our ResizeObserver smartly watches only the specific element that is connected to our ref.
When that observed element’s size changes, the observer’s callback function is immediately invoked. Inside this callback, we easily extract the new width and height from the entry object. Each entry in the observer’s callback array represents a single element whose dimensions have changed. We then simply update our component’s state with these fresh dimensions. It’s a beautifully optimized, direct, and declarative way to track element dimensions! For a deeper dive into this amazing API, you can explore its comprehensive documentation on MDN.
The ResizableBox Component
Our ResizableBox is a wonderfully straightforward functional component. It’s designed to showcase our useElementSize hook in a very visual way. Inside ResizableBox, we first use useState to manage its internal dimensions, which are used purely for styling. More importantly, we also employ useRef. This specific useRef creates a direct reference for the actual div element. This is the very element whose dimensions we are so keen to observe!
Then, the true magic unfolds! We pass this ref directly into our custom useElementSize hook. The hook, in turn, returns the current width and height of that observed div element. We then proudly display these dynamic values right next to our box. This gives you instant, clear feedback on our hook’s effectiveness. You can interactively drag the box’s bottom-right corner to manually resize it. As you do, notice how the displayed numbers update immediately and accurately! This captivating real-time interaction powerfully demonstrates the capabilities of our custom React Element Size hook.
Putting it all together in App.jsx
Finally, assembling our masterpiece is delightfully simple in App.jsx! We merely import our wonderfully crafted ResizableBox component. Then, we render it directly onto the screen. That’s genuinely all there is to it! The ResizableBox component efficiently handles everything else internally. It creates its div, attaches the necessary ref, and most importantly, it skillfully consumes our custom useElementSize hook.
What you end up with is a truly dynamic and self-aware UI element. This element thoughtfully responds to its own size changes without you having to write repetitive logic. This streamlined approach makes building complex, responsive layouts so much more manageable and enjoyable! It’s an elegant solution that keeps your component logic clean and focused.
Tips to Customise It
You’ve built an amazing foundation! Here are a few exciting ways you can further extend and personalize your new useElementSize hook and ResizableBox component:
- Debounce the Resize Updates: If your component re-renders too frequently during rapid resizing, consider implementing a ‘debounce’ mechanism. This technique ensures that the state only updates after a brief pause in resizing activity. It’s a fantastic way to optimize performance and prevent excessive re-renders, especially for complex UIs.
- Implement Minimum and Maximum Sizes: Enhance the
ResizableBoxcomponent by adding props likeminWidth,maxWidth,minHeight, andmaxHeight. This gives you granular control over how much the box can be resized. It’s perfect for maintaining layout integrity or specific design constraints. - Track Multiple Elements Independently: The beauty of a custom hook is its reusability! Imagine you have a grid of several interactive cards on a dashboard. You can effortlessly apply this exact same
useElementSizehook to each card. Each card will then track its own React Element Size completely independently. This powerfully demonstrates the hook’s versatility and reusability across your application. - Enable Conditional Content Rendering: The
widthandheightvalues returned by your hook are incredibly useful! You can use them to conditionally render entirely different content or apply distinct styling. For example, you might switch to a compact ‘mobile’ layout when the element’s width drops below a specific pixel threshold. This creates truly adaptive and smart user experiences.
Conclusion
Absolutely fantastic work, fellow coder! You’ve successfully built a truly powerful custom useElementSize React Hook today. Beyond that, you’ve gained practical insight into the incredibly useful ResizeObserver API. Your React applications can now dynamically respond to their own element dimensions. This skill alone unlocks a vast array of possibilities for creating sophisticated, responsive, and highly interactive user interfaces. We’ve not only built a tool but also reinforced core React concepts along the way. You should genuinely feel a huge sense of accomplishment right now! Go ahead and share your amazing new creation. Start thinking about all the brilliant, adaptive projects you can now bring to life. Keep that coding passion burning bright, and never stop experimenting!
Keep Learning: Eager to build even more dynamic and seamless UIs? Don’t miss our comprehensive post on React Infinite Scroll: Build Seamless Data Loading with JSX Hooks for elegant data loading experiences that your users will love!
Next Steps: Ready to master more advanced state management and backend interaction? Dive into our guide on React useActionState Form Submissions & Server Actions to elevate your form handling game!
