React Text Annotate
AnnotatorsTokenAnnotatorTextAnnotator

Annotators

import {TokenAnnotator, TextAnnotator} from 'react-text-annotate'
<TokenAnnotator
tokens={['My', 'text', 'needs', 'annotating', 'for', 'NLP', 'training']}
value={[{start: 5, end: 6, tag: 'TOPIC'}]}
/>

Note: the examples below use the State component from react-powerplug.

TokenAnnotator

Token annotators take a list of tokens, and allow selecting subranges of them.

In the example below, drag or double click to select text. Click on a selected "mark" to deselect.

On Monday night , Mr. Fallon will have a co-host for the first time : The rapper Cardi BPERSON, who just released her first album, " Invasion of Privacy . "
{
  "value": [
    {
      "start": 17,
      "end": 19,
      "tag": "PERSON"
    }
  ],
  "tag": "PERSON"
}

TextAnnotator

Text annotators take a string content prop, and allow the selecting of substrings. This can be useful for fine-grained text annotation tasks.

In the example below, drag or double click to select text. Click on a selected "mark" to deselect.

On Monday night , Mr. FallonPERSON will have a co-host for the first time : The rapper Cardi B , who just released her first album, " Invasion of Privacy . "
{
  "value": [
    {
      "start": 18,
      "end": 28,
      "tag": "PERSON"
    }
  ],
  "tag": "PERSON"
}