Support percentage width and height

[mosch]

Closes #399

width and height accept a percentage of the parent element as well as pixels:

<div style={{ width: '100%', maxWidth: 600 }}>
  <AvatarEditor image={image} width="100%" height={300} border={20} />
</div>

• A percentage sets the size of the whole canvas, and the crop area is that minus border on each side. The parent's content box is measured with a ResizeObserver, and the editor follows it when it resizes.
• In this mode the canvas is display: block. An inline canvas leaves a gap below it, which would make the parent grow on every measurement. Numeric sizes behave exactly as before.
• Only % is supported, not other CSS units. The canvas needs a pixel size, and a percentage is the case people actually need.

Needed for this to feel right:

• Size changes no longer reload the image. Before, any width/height change reloaded it, which flashed the loading state and reset position and zoom. Now the loaded image is resized in place.
• The core config updates during render instead of in an effect, so the canvas dimensions read during render are never one render behind. Before, the reload's extra re-render hid that lag.
• The image is loaded once on mount. It was loaded twice (mount effect + image effect), so onLoadStart/onLoadSuccess fired twice. The new test caught this.

Tests:

• 5 new lib tests: percentage sizing with border, export size, following a parent resize, numeric sizes unchanged, no reload on resize. The last one fails on the old code.
• All 53 lib, 85 core and 13 Playwright tests pass.
• Checked by hand in Chromium with the demo in a 60vw × 300px wrapper: the canvas was 600×300 and stayed stable (no feedback growth), and shrank to 420px after narrowing the viewport, with the image still drawn.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	react-avatar-editor	4d01e07	Commit Preview URL Branch Preview URL	Sep 30 2026, 01:05 PM