Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
ResizeObserver watches elements and notifies you when their size changes. Much better than window.resize - it's per-element and super performant!
Watch specific elements, not window
Efficient browser-native API
Content box, border box sizing
window.resize fires for entire window changes. ResizeObserver fires when individual elements change size (flex layout, animations, content changes). More precise!Drag the textarea corner to see ResizeObserver in action!
<div style="max-width: 700px; margin: 0 auto; font-family: 'Segoe UI', sans-serif;">
<div style="background: linear-gradient(135deg, #3b82f6 0%, #0ea5e9 50%, #06b6d4 100%); padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);">
<h2 style="color: white; margin: 0 0 12px 0; font-size: 28px; font-weight: 700; text-align: center;">📐 ResizeObserver Demo</h2>
<p style="color: rgba(255, 255, 255, 0.9); margin: 0 0 30px 0; font-size: 15px; text-align: center;">Resize the box below - drag the corner!</p>
<div style="background: rgba(255, 255, 255, 0.95); padding: 24px; border-radius: 12px; backdrop-filter: blur(10px);">
<textarea
id="resizableBox"
style="width: 100%; min-height: 100px; padding: 16px; border: 3px solid #3b82f6; border-radius: 8px; font-family: 'Segoe UI', sans-serif; font-size: 14px; resize: both; overflow: auto; background: #f0f9ff;"
placeholder="👆 Drag the bottom-right corner to resize me!"
>Try resizing this box by dragging the corner!
ResizeObserver is watching and reporting the size changes in real-time below.
This is much better than window.resize event!</textarea>
<div id="output" style="margin-top: 20px; padding: 16px; background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%); border-radius: 8px; border-left: 4px solid #3b82f6;"></div>
</div>
</div>
</div>Loading preview...
// Create ResizeObserver
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
// Get element's new size
const width = entry.contentRect.width;
const height = entry.contentRect.height;
console.log(`Element resized to: ${width}x${height}`);
// Update UI, recalculate layout, etc.
updateChart(width, height);
}
});
// Start observing an element
const element = document.getElementById('myElement');
observer.observe(element);
// Later: Stop observing
observer.unobserve(element);
// Or disconnect all observations
observer.disconnect();const observer = new ResizeObserver(entries => {
for (const entry of entries) {
// 1. contentRect - Basic size info (legacy)
console.log('contentRect:', {
width: entry.contentRect.width,
height: entry.contentRect.height,
top: entry.contentRect.top,
left: entry.contentRect.left
});
// 2. contentBoxSize - Content area (excluding padding/border)
const contentBox = entry.contentBoxSize?.[0];
console.log('contentBox:', {
inlineSize: contentBox?.inlineSize, // Width in horizontal writing
blockSize: contentBox?.blockSize // Height in horizontal writing
});
// 3. borderBoxSize - Including padding and border
const borderBox = entry.borderBoxSize?.[0];
console.log('borderBox:', {
inlineSize: borderBox?.inlineSize,
blockSize: borderBox?.blockSize
});
// 4. devicePixelContentBoxSize - Device pixel ratio aware
const deviceBox = entry.devicePixelContentBoxSize?.[0];
console.log('devicePixels:', {
inlineSize: deviceBox?.inlineSize,
blockSize: deviceBox?.blockSize
});
}
});
observer.observe(element);// Redraw chart when container resizes
const chartContainer = document.getElementById('chart');
let chart = createChart(chartContainer);
const observer = new ResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
// Resize chart to fit new container size
chart.resize(width, height);
chart.redraw();
});
observer.observe(chartContainer);
// Works with:
// - Window resize
// - Sidebar collapse/expand
// - Parent container flex changes// Adjust font size based on container width
const container = document.getElementById('textBox');
const observer = new ResizeObserver(entries => {
const width = entries[0].contentRect.width;
// Scale font size with container
const fontSize = Math.max(12, Math.min(24, width / 20));
container.style.fontSize = fontSize + 'px';
console.log(`Font size adjusted to: ${fontSize}px`);
});
observer.observe(container);
// Perfect for:
// - Dashboard cards
// - Responsive headings
// - Adaptive UI components// Update visible items when viewport changes
const scrollContainer = document.getElementById('list');
const observer = new ResizeObserver(entries => {
const height = entries[0].contentRect.height;
const itemHeight = 50; // Fixed item height
// Calculate how many items can fit
const visibleCount = Math.ceil(height / itemHeight);
// Render only visible items
renderVisibleItems(visibleCount);
console.log(`Rendering ${visibleCount} visible items`);
});
observer.observe(scrollContainer);
// Use for:
// - Long lists (1000+ items)
// - Infinite scroll
// - Performance optimizationRedraw visualizations when container size changes
Adjust component layout based on available space
Calculate visible items based on viewport height
Recalculate grid layout when container resizes
Always call observer.disconnect() when component unmounts
useEffect(() => {
return () => observer.disconnect();
}, []);If resize handler is expensive, debounce or throttle it
const debounce = (fn, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
};One observer can watch many elements efficiently
elements.forEach(el => observer.observe(el));Supported in all modern browsers! Chrome 64+, Firefox 69+, Safari 13.1+
Watch individual elements, not just window
Browser-optimized, efficient detection
Resize visualizations dynamically
contentRect, borderBox, contentBox