ResizeObserver

getResizeObserver() hands out a single shared ResizeObserver whose callbacks are coalesced into one requestAnimationFrame per element per frame. Many components can observe many elements without duplicate work or resize-loop thrash. useResizeObserver wraps it with framework lifecycle so you just pass a ref and a callback.

Usage

import { useRef, useState } from 'react';
import { useResizeObserver } from '@60fps/react/resize-observer';

function Measured() {
	const ref = useRef<HTMLDivElement>(null);
	const [width, setWidth] = useState(0);

	useResizeObserver(ref, (entry) => setWidth(entry.contentRect.width));

	return (
		<div ref={ref} className="resize overflow-auto">
			{Math.round(width)}px
		</div>
	);
}

<script setup lang="ts">
import { ref } from 'vue';
import { useResizeObserver } from '@60fps/vue/resize-observer';

const box = ref<HTMLElement | null>(null);
const width = ref(0);

useResizeObserver(box, (entry) => (width.value = entry.contentRect.width));
</script>

<template>
	<div ref="box" class="resize overflow-auto">{{ Math.round(width) }}px</div>
</template>

API

useResizeObserver(ref, callback)

getResizeObserver(polyfill?, options?)

The framework-agnostic manager underneath the hooks.