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"
}

<State
  initial={{ value: [{ start: 17, end: 19, tag: 'PERSON' }], tag: 'PERSON' }}
>
  {({ state, setState }) => (
    <Card>
      <select
        onChange={e => setState({ tag: e.target.value })}
        value={state.tag}
      >
        <option value="ORG">ORG</option>
        <option value="PERSON">PERSON</option>
      </select>
      <TokenAnnotator
        style={{
          maxWidth: 500,
          lineHeight: 1.5,
        }}
        tokens={TEXT.split(' ')}
        value={state.value}
        onChange={value => setState({ value })}
        getSpan={span => ({
          ...span,
          tag: state.tag,
          color: TAG_COLORS[state.tag],
        })}
      />
      <pre style={{ fontSize: 12, lineHeight: 1.2 }}>
        {JSON.stringify(state, null, 2)}
      </pre>
    </Card>
  )}
</State><State
  initial={{ value: [{ start: 17, end: 19, tag: 'PERSON' }], tag: 'PERSON' }}
>
  {({ state, setState }) => (
    <Card>
      <select
        onChange={e => setState({ tag: e.target.value })}
        value={state.tag}
      >
        <option value="ORG">ORG</option>
        <option value="PERSON">PERSON</option>
      </select>
      <TokenAnnotator
        style={{
          maxWidth: 500,
          lineHeight: 1.5,
        }}
        tokens={TEXT.split(' ')}
        value={state.value}
        onChange={value => setState({ value })}
        getSpan={span => ({
          ...span,
          tag: state.tag,
          color: TAG_COLORS[state.tag],
        })}
      />
      <pre style={{ fontSize: 12, lineHeight: 1.2 }}>
        {JSON.stringify(state, null, 2)}
      </pre>
    </Card>
  )}
</State>

`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"
}

<State
  initial={{ value: [{ start: 18, end: 28, tag: 'PERSON' }], tag: 'PERSON' }}
>
  {({ state, setState }) => (
    <Card>
      <select
        onChange={e => setState({ tag: e.target.value })}
        value={state.tag}
      >
        <option value="ORG">ORG</option>
        <option value="PERSON">PERSON</option>
      </select>
      <TextAnnotator
        style={{
          maxWidth: 500,
          lineHeight: 1.5,
        }}
        content={TEXT}
        value={state.value}
        onChange={value => setState({ value })}
        getSpan={span => ({
          ...span,
          tag: state.tag,
          color: TAG_COLORS[state.tag],
        })}
      />
      <pre style={{ fontSize: 12, lineHeight: 1.2 }}>
        {JSON.stringify(state, null, 2)}
      </pre>
    </Card>
  )}
</State><State
  initial={{ value: [{ start: 18, end: 28, tag: 'PERSON' }], tag: 'PERSON' }}
>
  {({ state, setState }) => (
    <Card>
      <select
        onChange={e => setState({ tag: e.target.value })}
        value={state.tag}
      >
        <option value="ORG">ORG</option>
        <option value="PERSON">PERSON</option>
      </select>
      <TextAnnotator
        style={{
          maxWidth: 500,
          lineHeight: 1.5,
        }}
        content={TEXT}
        value={state.value}
        onChange={value => setState({ value })}
        getSpan={span => ({
          ...span,
          tag: state.tag,
          color: TAG_COLORS[state.tag],
        })}
      />
      <pre style={{ fontSize: 12, lineHeight: 1.2 }}>
        {JSON.stringify(state, null, 2)}
      </pre>
    </Card>
  )}
</State>

Annotators

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}TokenAnnotator

TextAnnotator

`TokenAnnotator`

`TextAnnotator`