React Text Labeler Component – text-annotator

react-text-annotator is a labeler component that lays out text and overlays textual decorations like labels, predictions, and relations based on given data.

It is extensible to allow for custom rendering of tokens and decoration overlays and is accessible to use with full keyboard interactions.

Basic usage:

const annotations: AnnotationData[] = [
      {
          id: 'id1',
          color: 'red',
          endToken: 15,
          startToken: 5,
          name: 'label',
          kind: 'label'
      },
      {
          id: 'id2',
          color: 'blue',
          endToken: 25,
          startToken: 10,
          name: 'relation',
          kind: 'relation'
      }
  ];
const labelerText = 'This is sample text to test the labeler functionality.';
return <Labeler text={labelerText} annotations={annotations} />;

Preview:

Download Details:

Author: microsoft

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/microsoft/react-text-annotator

License: MIT