Skip to content

Components

React components for building annotation interfaces with Annota.

AnnotaProvider

Section titled “AnnotaProvider”

Provides annotation context to all child components. Must wrap your annotation UI.

import { AnnotaProvider } from "annota";


function App() {
  return (
    <AnnotaProvider slideId="my-slide">
      {/* Your annotation components */}
    </AnnotaProvider>
  );
}

Props

Section titled “Props”
PropTypeDescription
slideIdstringUnique identifier for this slide’s annotations
childrenReactNodeChild components

AnnotaViewer

Section titled “AnnotaViewer”

Wrapper component for OpenSeadragon viewer.

import { AnnotaViewer } from "annota";
import { useState } from "react";


function Viewer() {
  const [viewer, setViewer] = useState(null);


  return (
    <AnnotaViewer
      options={{
        tileSources: "/path/to/image.dzi",
        prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@4/build/openseadragon/images/",
      }}
      onViewerReady={setViewer}
    />
  );
}

Props

Section titled “Props”
PropTypeDescription
optionsOpenSeadragon.OptionsOpenSeadragon configuration
onViewerReady(viewer: Viewer) => voidCallback when viewer initializes
classNamestringCSS class for container
styleCSSPropertiesInline styles for container

OpenSeadragon Options

Section titled “OpenSeadragon Options”

Common options:

<AnnotaViewer
  options={{
    tileSources: "/image.dzi",
    prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@4/build/openseadragon/images/",
    showNavigationControl: true,
    showNavigator: true,
    navigatorPosition: "BOTTOM_RIGHT",
    minZoomLevel: 0.5,
    maxZoomLevel: 40,
    visibilityRatio: 0.5,
    constrainDuringPan: true,
  }}
  onViewerReady={setViewer}
/>

Annotator

Section titled “Annotator”

Creates the annotation overlay layer on top of the viewer.

import { Annotator } from "annota";


function AnnotationLayer({ viewer }) {
  return <Annotator viewer={viewer} />;
}

Props

Section titled “Props”
PropTypeDescription
viewerViewer | nullOpenSeadragon viewer instance
styleStyleFunctionDynamic style function
childrenReactNodeChild components (tool controllers, etc.)

Dynamic Styling

Section titled “Dynamic Styling”
<Annotator
  viewer={viewer}
  style={(annotation) => ({
    fill: annotation.properties?.type === "tumor" ? "#FF0000" : "#00FF00",
    fillOpacity: 0.3,
    stroke: "#FFFFFF",
    strokeWidth: 2,
  })}
/>

Complete Example

Section titled “Complete Example”
import {
  AnnotaProvider,
  AnnotaViewer,
  Annotator,
  useAnnotations,
  useSelection,
} from "annota";
import { useState } from "react";
import "annota/dist/index.css";


function App() {
  return (
    <AnnotaProvider slideId="slide-001">
      <AnnotationWorkspace />
    </AnnotaProvider>
  );
}


function AnnotationWorkspace() {
  const [viewer, setViewer] = useState(null);
  const annotations = useAnnotations();
  const selection = useSelection();


  return (
    <div style={{ display: "flex", height: "100vh" }}>
      {/* Sidebar */}
      <div style={{ width: 250, padding: 16, borderRight: "1px solid #ccc" }}>
        <h3>Annotations ({annotations.length})</h3>
        <p>Selected: {selection.length}</p>
      </div>


      {/* Viewer */}
      <div style={{ flex: 1, position: "relative" }}>
        <AnnotaViewer
          options={{
            tileSources: "/slide.dzi",
            prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@4/build/openseadragon/images/",
          }}
          onViewerReady={setViewer}
        />
        <Annotator viewer={viewer} />
      </div>
    </div>
  );
}

See Also

Section titled “See Also”