Changelog - 2026-11-03
useElementSize follows any element, rounds and says when it measured, and FakeResizeObserver tests it
New FeatureIn one line. useElementSize() with no ref returns a ref to give to the element, so it follows an element that mounts later or is replaced. It takes round, it returns measured, and FakeResizeObserver in @venizia/ardor/testing lets a test deliver a size.
The example is in useElementSize.
What changed
- A callback
ref. Leave out therefoption and the hook returnsref. Its identity never changes. When the element mounts later, is replaced or is removed, the hook observes the new one and starts again from0by0. Arefobject still works as before. round.round: truerounds width and height to whole pixels, so a size that moves by a fraction does not render again. The default isfalse.measured. It isfalseuntil the first size is read, and also on a host with noResizeObserver. An element measured at0by0hasmeasured: true, so you can tell it from one not read yet.FakeResizeObserver.FakeResizeObserver.install()puts a fake onglobalThis.ResizeObserverand returns a function that puts the previous one back.FakeResizeObserver.flush({ element, width, height })delivers a size to every observer of that element. happy-dom's ownobserve()does nothing, so before this a test could not give the hook a size.
Who is affected
- An app that compares the whole return of
useElementSizewithtoEqual({ width, height }). The return now hasmeasured. Readwidthandheight, or addmeasuredto the expectation. - All other apps. No action needed. The new options and the new field are additive.
See Hooks and Fake the browser APIs.