@amnstak/react-image-annotate

React Image Annotate

Implemented features in fork:

• added typescript
• changed seamless immutability to immer
• updated npm and dependencies used by project
• updated react to v.19

Features

• Simple input/output format
• Bounding Box, Point and Polygon Annotation
• Zooming, Scaling, Panning
• Multiple Images
• Cursor Crosshair

Usage

npm i @amnstak/react-image-annotate

import React from "react";
import Annotator from "@amnstak/react-image-annotate";

const App = () => (
  <Annotator
    regionClsList={["car", "truck"]}
    enabledTools={["select", "create-polygon"]}
    selectedTool="select"
    images={[
      {
          src: "https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
          name: "car-image-1",
        },
    ]}
    onPrevImages={(state) => {
      console.log(state);
    }}
    onNextImages={(state) => {
      console.log(state);
    }}
    onExit={(output) => {
      console.log({output});
    }}
  />
);

export default App;

To get the proper fonts, make sure to import the Inter UI or Roboto font, the following line added to a css file should suffice.

@import url("https://rsms.me/inter/inter.css");

Props

All of the following properties can be defined on the Annotator...

Refer AnnotatorProps

import { AnnotatorProps } from "@amnstak/react-image-annotate";

It has a complete details of the accepted props