1.2.0 • Published 23 days ago
react-text-annotate-blend v1.2.0
react-text-annotate-blend
React component library for interactive text annotations with support for overlapping annotations that blend
Check the docs!
TextAnnotateBlend
This component allows for text annotation with overlapping start and end positions. The overlap is resolved as a blend of the two tag colors to visually indicate the overlap.
TextAnnotateBlend only supports a single overlap of annotations at a given position.
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}
/>
TextAnnotate
TextAnnotate is a simple text annotation component bound to start and end positioning. Overlapping components is not supported.
This component extends and cleans up the TextAnnotator
component from react-text-annotate.
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}
/>