react-img-annotation

This is a package that helps with annotating data and viewing annotations.

It supports creating rectangles and attaching labels/fields to said rectangles.

NOTE:

This package was previously implemented differently using fabricjs, now it has been migrated to konva. If you want to use the previous implementation you can use version 1.1.61

Dependencies

for this library you need konva, react-konva, react-konva-utils, react-icons

which you can install using npm install konva react-konva react-konva-utils react-icons

Examples

There are two main components in this package: AnnotationsEditor and AnnotationsViewer here is how to use AnnotationsEditor:

import { useState } from "react";
import { AnnotationsEditor } from "react-img-annotation";
import "./App.css";
const initialRectangles = [
  {
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: "transparent",
    id: "rect1",
  },
  {
    x: 150,
    y: 150,
    width: 300,
    height: 100,
    fill: "transparent",
    id: "rect2",
  },
];

const App = () => {
  const [rectangles, setRectangles] = useState(initialRectangles);
  const [selectedId, selectShape] = useState(null);

  const checkDeselect = (e) => {
    // deselect when clicked on empty area
    const clickedOnEmpty = e.target === e.target.getStage();
    if (clickedOnEmpty) {
      selectShape(null);
    }
  };

  return (
    <>
      <AnnotationsEditor
        // initial annotations
        annotations={[]}
        onChange={(newattr) => {
          setRectangles((rectangles) =>
            rectangles.map((rect) => {
              if (rect.id === newattr.id) {
                return { ...rect, ...newattr };
              }
              return rect;
            })
          );
        }}
        onAddAnnotation={(annotation) => {
          setRectangles((rectangles) => [...rectangles, annotation]);
        }}
        onDeleteAnnotation={(deletedId) => {
          console.log(deletedId);
        }}
        onFieldSelectChange={(change) => {
          console.log(change);
        }}
        onAnnotationSelected={(shapeProps) => {
          console.log(shapeProps);
        }}
        options={[
          { label: "field one", value: "3" },
          { label: "field two", value: "4" },
        ]}
        image={"url/to/image"}
        width={1144}
        height={643}
        disabledOptions={["field one"]}
        highlightedAnnotations={[]}
        // default rect styling, check konva rect for all props
        defaultAnnotationStyle={{
          stroke: "red",
          fill: "transparent",
        }}
        // higlighted rect styling, check konva rect for all props
        highlightedAnnotationStyle={{
          stroke: "blue",
          fill: "transparent",
        }}
        // transformer styling, check konva transformer for all props
        transformerStyle={{ anchorFill: "green", borderStroke: "red" }}
        showLabels={true} // shows labels on top of the rectangles
        rectLabelPositionFunc={(selectedOptions, currentPos) => {
          // control position of labels (default is on top)
          return {
            top: 25,
            left: 25,
          };
        }}
      />
    </>
  );
};

export default App;

Here is how to use AnnotationsViewer:

import { useState } from "react";
import "./App.css";
import { AnnotationsViewer } from "react-img-annotation";
const initialRectangles = [
  {
    x: 10,
    y: 10,
    width: 100,
    height: 100,
    fill: "transparent",
    id: "rect1",
    confidence: 0.2,
    fields: [
      { name: "rect1 field1", confidence: 0.32323 },
      { name: "rect1 field2", confidence: 0.3123123 },
      { name: "rect1 field3", confidence: 0.35435 },
      { name: "rect1 field4", confidence: 0.344 },
    ],
  },
  {
    x: 150,
    y: 150,
    width: 300,
    height: 100,
    fill: "transparent",
    id: "rect2",
    confidence: 0.9,
    fields: [{ name: "rect2 field1", confidence: 0.9 }],
  },
];

const App = () => {
  const [rectangles, setRectangles] = useState(initialRectangles);

  return (
    <>
      <AnnotationsViewer
        annotations={rectangles}
        image={"url/to/image"}
        width={1144}
        height={643}
        onAnnotationClick={(annotation) => console.log(annotation)}
      />
    </>
  );
};

export default App;

Style customization:

Many parts of the package are customizable through classNames:

| className | description | notes | | ------------------------------- | ---------------------------------------------------------- | ------------------------------------ | | rect-edit-labels-container | controls styling for labels container in editor rectangles | do not change position, top or left. | | rect-edit-label | controls styling for labels | | | rect-edit-menu-button | menu button styling | | | rect-edit-delete-button | delete button styling | | | rect-view-label | label styling in viewer rectangles | | | fields-select-placeholder | styling for fields select placehlder | | | fields-select-placeholder-input | styling for select input | | | fields-select-dropdown | styling for select dropdown | | | fields-select-no-options | styling for when there are no options | | | fields-select-option | styling for a single option | |

License

MIT © mhmodo10