Mischief

22 / Documents

Annotation Layer

Notes attached to regions of a page. Drag to add one, select to read it, and the coordinates stay relative to the page rather than the screen.

Live previewSource
Contract, page 2

Drag on the page to add a note.

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Review({ page }: { page: string }) {
  return (
    <AnnotationLayer
      src={page}
      alt="Contract, page 2"
      annotations={notes}
      onCreate={(rect) => addNote(rect)}
    />
  )
}

API

src, altstringThe page image and its description.
annotationsAnnotation[]Id, note, author, and x, y, width, height as fractions of the page.
onCreate(rect: AnnotationRect) => voidRuns with a new region when someone drags one out. Omit it to disable drawing.
onDelete(id: string) => voidShows a delete control when given.
activeId, defaultActiveId, onActiveChangestring | nullThe selected note, controlled or uncontrolled.
minSizenumberSmallest drag that counts as a region. Defaults to 0.01 of the page.

Accessibility

Regions are toggle buttons carrying their note as an accessible name, so notes can be reached and read without a pointer. The note itself appears in a polite live region rather than a hover card. A drag that never moved is treated as a deselect instead of creating an unusably small region. Coordinates are fractions of the page, so they survive zoom and a change of screen.

Dependencies

lucide-react