### Install React Image Annotation

Source: https://github.com/rickyshin93/react-image-annotation/blob/main/README.md

Installs the react-image-annotation package and its dependency, tldraw, using either npm or pnpm.

```bash
npm install @rockshin/react-image-annotation tldraw
```

```bash
pnpm add @rockshin/react-image-annotation tldraw
```

--------------------------------

### Basic Usage of ImageAnnotationEditor

Source: https://github.com/rickyshin93/react-image-annotation/blob/main/README.md

Demonstrates the basic integration of the ImageAnnotationEditor component in a React application. It includes importing necessary components and styles, defining image data, and handling the 'onDone' callback.

```tsx
import { ImageAnnotationEditor } from '@rockshin/react-image-annotation'
import 'tldraw/tldraw.css'

function App() {
  const images = [
    {
      id: '1',
      src: 'https://example.com/image1.jpg',
      annotations: [], // Initial annotations (optional)
    },
  ]

  const handleDone = ({ annotations, image }) => {
    console.log('Annotations:', annotations)
    console.log('Image:', image)
  }

  return (
    <div style={{ width: '100%', height: '600px', position: 'relative' }}>
      <ImageAnnotationEditor
        images={images}
        onDone={handleDone}
        tools={{
          eraser: { enabled: true },
          text: { enabled: true },
        }}
      />
    </div>
  )
}
```

--------------------------------

### Advanced Usage with Multiple Images and Callbacks

Source: https://github.com/rickyshin93/react-image-annotation/blob/main/README.md

Illustrates advanced usage of the ImageAnnotationEditor, including support for multiple images with initial annotations, custom event handlers for annotation creation, changes, deletion, and image navigation, as well as image load error handling.

```tsx
import { ImageAnnotationEditor } from '@rockshin/react-image-annotation'

function AdvancedExample() {
  const images = [
    {
      id: '1',
      src: 'https://example.com/image1.jpg',
      annotations: [
        {
          id: 'anno1',
          x: 100,
          y: 100,
          width: 200,
          height: 150,
          rotation: 0,
          label: '1',
          timestamp: Date.now(),
          metadata: {
            color: 'red',
            createdBy: 'user1',
            modifiedAt: Date.now(),
            version: 1,
            tags: [],
            isVerified: false,
          },
        },
      ],
    },
    {
      id: '2',
      src: 'https://example.com/image2.jpg',
      annotations: [],
    },
  ]

  return (
    <div style={{ width: '100%', height: '800px', position: 'relative' }}>
      <ImageAnnotationEditor
        images={images}
        initialImageIndex={0}
        tools={{
          eraser: { enabled: true },
          text: { enabled: true },
        }}
        outputTriggerOn={{
          created: true, // Trigger onDone when annotation is created
          changed: true, // Trigger onDone when annotation is modified
          deleted: true, // Trigger onDone when annotation is deleted
          navigated: false, // Trigger onDone when image is navigated
        }}
        onAnnotationCreated={({ image, annotation }) => {
          console.log('New annotation:', annotation)
        }}
        onAnnotationChange={({ image, annotation }) => {
          console.log('Modified annotation:', annotation)
        }}
        onAnnotationDeleted={({ image, annotation }) => {
          console.log('Deleted annotation:', annotation)
        }}
        onImageChange={({ index, image }) => {
          console.log('Current image:', index, image)
        }}
        onImageLoadError={error => {
          console.error('Image load error:', error)
        }}
        onDone={({ annotations, image }) => {
          console.log('Final annotations:', annotations)
        }}
      />
    </div>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.