React Adapter

The React adapter provides an <AnnotateImage> component with props-driven configuration and ref-based imperative methods.

Installation
Bash 
npm install annotate-image react react-dom
Usage (JSX)
JSX 
import { useRef } from 'react';
import { AnnotateImage } from 'annotate-image/react';
import 'annotate-image/css';

function App() {
  const ref = useRef(null);

  return (
    <>
      <AnnotateImage
        ref={ref}
        src="/photo.jpg"
        width={800}
        height={600}
        editable
        notes={[]}
        onChange={(notes) => console.log(notes)}
        onSave={(note) => console.log('Saved:', note)}
        onDelete={(note) => console.log('Deleted:', note)}
      />
      <button onClick={() => ref.current?.add()}>Add Note</button>
    </>
  );
}

Props

Prop Type Default Description
src string — Image URL (required)
width number — Image width in pixels
height number — Image height in pixels
notes AnnotationNote[] [] Initial annotations
editable boolean true Enable editing
onChange (notes: NoteData[]) => void — Notes changed
onSave (note: NoteData) => void — Note saved
onDelete (note: NoteData) => void — Note deleted
onLoad (notes: NoteData[]) => void — Notes loaded
alt string — Image alt text
autoResize boolean true Re-scale on resize
onError (ctx: AnnotateErrorContext) => void — Error occurred

Ref Methods

Method Returns Description
add() void Enter add-note mode
clear() void Remove all annotations
getNotes() NoteData[] Get current annotations

Live Demo