@wallsnap/react

React components and hooks for the wallsnap wall preview: scene renderer, wall picker, frame swatches, drag handling. All geometry comes from @wallsnap/core — these components derive none of their own.

Install

pnpm add @wallsnap/react @wallsnap/core

React 18 or 19 is a peer dependency.

Usage

import { WallScene, useArtDrag, useContainerSize } from '@wallsnap/react';

// WallScene renders the three-layer scene:
// wall backdrop → frame/mat/artwork → foreground occlusion plate.
// The foreground plate is always last in DOM order and pointer-events-none —
// that ordering is the package's core invariant, not a style choice.
<WallScene
  wall={wall}
  wallImageUrl={wallUrl}
  overlayUrl={overlayUrl}
  layout={layout} // computed with @wallsnap/core computeSceneLayout
  selectedFrame={frame}
  imageUrl={artUrl}
  imageWidth={artWidth}
  imageHeight={artHeight}
  dragging={drag.dragging}
  onPointerDown={drag.handlers.onPointerDown}
  onPointerMove={drag.handlers.onPointerMove}
  onPointerUp={drag.handlers.onPointerUp}
/>;

Also exported: WallPicker, WallOptionButton, FrameSwatchButton, useArtDrag (pointer-drag with core's clamping), useContainerSize.

Browser PNG export

import { downloadBlob, exportWallScene } from '@wallsnap/react';

const png = await exportWallScene({
  wall,
  wallImageUrl,
  overlayUrl,
  selectedFrame: frame,
  imageUrl: artworkUrl,
  printSize: { widthCm: 50, heightCm: 70 },
  offset: drag.offset,
  maxWidth: 2400,
});

downloadBlob(png, 'room-preview.png');

The browser compositor calls the same computeSceneGeometry used by the preview and server renderer, draws the foreground plate last, and rejects remote images that do not grant canvas CORS access.

License

MIT — see LICENSE.