Getting started

Getting started

Install the package, import the stylesheet once, then render an image with its marks or open it in the editor.

Install

npm install @reuse-sh/annotations

Use it

The browser module works without a framework. In React, the component creates the same controller when it mounts and destroys it when it unmounts.

import {
  parseAnnotations,
  createAnnotatedImage,
} from "@reuse-sh/annotations";
import "@reuse-sh/annotations/styles.css";

const annotations = parseAnnotations([{
  kind: "area",
  box: [10, 20, 35, 25],
  label: "Bands too tight",
}]);
const image = createAnnotatedImage(root, {
  src: "/prints/coral-sky.jpg",
  alt: "A marble print in coral, sand and blue",
  width: 1600, height: 1200, annotations,
});

// Later, when the image leaves the page
image.destroy();