react-text-annotate-blend

React component library for interactive text annotations with support for overlapping annotations that blend

This project extends and cleans up the TextAnnotator component from react-text-annotate.

Check the docs!

Starter code

Minimum Blended Annotation example:

const value = [
  {
    start: 5,
    end: 29,
    tag: "tagA",
    color: "rgb(179, 245, 66)"
  },
  {
    start: 24,
    end: 41,
    tag: "tagB",
    color: "#42f5f5"
  }
]

<TextAnnotateBlend
    content="This component lets you blend annotations!"
    value={value}
/>

Minimum Annotation example:

const value = [
  {
    start: 0,
    end: 14,
    tag: "tagA",
    color: "rgb(179, 245, 66)",
  },
  {
    start: 24,
    end: 41,
    tag: "tagB",
    color: "#42f5f5",
  },
]

<TextAnnotate
    content="This component lets you blend annotations!"
    value={value}
/>