Function useSvgBoundingBox

Returns an object with the width, height, top and left client coordinates of the specified SVGGraphicsElement.

At rendering time, text elements in SVG don't have a size yet, which makes it difficult to align other elements around them. This hook takes a reference, measures the bounding box of the referenced element and returns its position and size. This allows other elements to use the dimensions of the text element after rendering.

Example

const textRef = useRef(null);
const { width, height, top, left } = useSvgBoundingBox(ref);

<rect x={top} y={left} width={width} height={height} />
<text x={5} y={5} ref={textRef}>svg text</text>