useSurfaceMetrics

Measures the surface's SVG and the canvas unit, and re-measures whenever the SVG resizes or the host enters or leaves presentation.

@internote/canvas-sdk/reactHook
On this page
import { useSurfaceMetrics } from '@internote/canvas-sdk/react';

Before the first measurement, and on the server, it reports a fallback box of 800 by 460 at a unit of 17, with measured false. Passing ctx.isPresenting is what schedules a further measurement once the host has restaged the tree for presentation.

#Signature

(
    containerRef: React.RefObject<HTMLElement | null>,
    svgRef: React.RefObject<SVGSVGElement | null>,
    presenting: boolean,
): SurfaceMetrics

#Parameters

containerRef
The element the surface fills.
svgRef
The SVG the surface draws in.
presenting
Whether the host is presenting, ctx.isPresenting.

#Example

const containerRef = useRef<HTMLDivElement>(null);
const svgRef = useRef<SVGSVGElement>(null);
const { width, height, unit } = useSurfaceMetrics(containerRef, svgRef, ctx.isPresenting);
return <div ref={containerRef}><svg ref={svgRef} viewBox={`0 0 ${width} ${height}`}>…</svg></div>;

Declared in packages/canvas-sdk/src/react/use-surface-metrics.ts:67.

Last updated