React SVG Annotation

The SVG Annotation Tool

Live Demo

Checkout Storybook Demo to get more information!

Installation

# use yarn
yarn add react-svg-annotation

# use npm
npm install react-svg-annotation

Basic Usage

import { SvgAnnotation } from "react-svg-annotation";

const Example = () => {
  return <SvgAnnotation width={400} height={400} />;
};

export default Example;

Advanced Usage with Custom UI

If SvgAnnotation Component is not suitable for your use case, you may combine useSvgAnnotation and SvgRenderer to make your own component

import { useSvgAnnotation, SvgRenderer } from "react-svg-annotation";

const Example = () => {
  const { svgProps, changeTool, tool } = useSvgAnnotation({
    styleOption: {
      color: "black",
      fillColor: "transparent",
      lineWidth: 5,
    },
  });

  return (
    <div>
      <div>{/* Custom Control Component */}</div>
      <SvgRenderer {...svgProps} width={400} height={400} />
    </div>
  );
};

export default Example;

Common Type

Annotation

type Annotation = Array<SVGObject>; // list of SVG Object

SVGStyleOption

type SVGStyleOption = Partial<{
  color: string;
  lineWidth: number;
  fillColor: string;
}>;

Property	Type	Description	Default Value
color	string	stroke color of svg element	black
fillColor	string	fill color of svg element	transparent
lineWidth	number	stroke width of svg element	5

Component API

SvgAnnotation Component

interface SvgAnnotationProps extends SVGStyleOption {
  backgroundImage?: string;
  width?: number;
  height?: number;
  value?: Annotation;
  onChange?: (value: Annotation) => void;
}

Property	Type	Description	Default Value
backgroundImage	string	custom background image url	NA
width	number	width of svg	400
height	number	height of svg	400
value	Annotation	Annotation Object	undefined
onChange	(value: Annotation) => void	handle change function	undefined

useSvgAnnotation hook

type UseSvgAnnotationParams = {
  styleOption?: SVGStyleOption;
  value?: Annotation;
  onChange?: (value: Annotation) => void;
};

type UseSvgAnnotation<T extends SVGSVGElement> = (options?: UseSvgAnnotationParams) => {
  svgProps: SvgRendererProps;
  tool: Tools;
  changeTool: (value: Tools) => void;
  download: (type: ImageType) => void;
  toSvgString: () => string | null;
};

SvgRenderer Component

interface SvgRendererProps extends SVGAttributes<SVGSVGElement> {
  tool: Tools;
  annotation: Annotation;
  currentSVGObject: SVGObject | null;
  shapeControl: ShapeControl | null;
}