react-svg-annotation v0.0.15

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;
}>;

Component API

SvgAnnotation Component

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

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;
}