useDimensions Hook (Replace AutoSizer)

example.js

// NOTE: Adapted from TS code, stripped types out

import React, { useRef, useState, useEffect } from 'react'

/**
 * A custom hook that uses a resizeObserver to change dimension state
 * @param defaultDimensions { width: number, height: number}
 */
export function useDimensions(defaultDimensions) {
	const [dimensions, setDimensions] = useState(defaultDimensions)
	const ref = useRef()
  useEffect(
		() => {
			const ro = new ResizeObserver(entries => {
				for (const entry of entries) {
					const { width, height } = entry.contentRect
					setDimensions({ width, height })
				}
			})
			ro.observe(ref.current)
			return () => ro.disconnect()
		},
		[ref],
	)

	return [dimensions, ref]
}


======

const MainView = () => {
	const [dimensions, viewspaceRef] = useDimensions({
		width: 500,
		height: 500,
	})

	return (
		<div>
			<Controls />
			<div ref={viewspaceRef}>
				<ViewSpace dimensions={dimensions} />
			</div>
		</div>
	)
}