Description:
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:
