0.3.3 • Published 2 years ago
react-nested-annotator v0.3.3
react-nested-annotator
A React Component for annotating nested text from html.
Nested means you can annotate on an annotated text, and select another tag.
basic usage
import { useState } from "react";
import { TextAnnotator } from "react-nested-annotator";
const TEXT = "这是一段话";
const argumentsTemplate = [];
const tags = {
Tag1: "#3ee0b8",
Tag2: "#84d2ff",
};
const App = () => {
const [argument, setArguments] = useState(argumentsTemplate);
return (
<div className="container">
<TextAnnotator
content={TEXT}
tags={tags}
value={argument}
onChange={function (value) {
setArguments(value);
return;
}}
/>
</div>
);
};
export default App;
how to Delete the label
move mouse over the annotated text, and then rightclick
annotate with edge
<TextAnnotator
content={TEXT}
tags={tags}
value={argument}
onChange={function (value) {
setArguments(value);
return;
}}
+ useEdge={true}
/>
DIY tag style
<TextAnnotator
content={TEXT}
tags={tags}
value={argument}
onChange={function (value) {
setArguments(value);
return;
}}
+ tagStyle={{
+ verticalAlign: "middle",
+ backgroundColor: "white",
+ color: "black",
+ borderRadius: "5px",
+ fontSize: "0.5rem",
+ fontWeight: "bold",
+ padding: "4px"
+ }}
/>
codeSandBox
https://codesandbox.io/s/quirky-gauss-p6wfd?file=/src/App.js
APIs
key | type | description | default |
---|---|---|---|
content | string | text | |
tags | object | { tagName: color-Hex } | |
value | object[] | entities Array | |
onChange | ( value: [] ) => void | value change callback | |
useEdge | boolean | if annotate with edge | false |
tagStyle | CSSProperties | diy tag style | null |
Bold key means it must be provided.