Comments (2)
Hi, if you're using the TokenAnnotator
, there are examples of how to do that in the repository, if you use the TextAnnotator
, last I checked it did not work.
I filed an issue and a PR is opened
from react-text-annotate.
@Sk1794 set renderMark
as a custom prop to override the default highlight.
<TokenAnnotator
tokens={["My", "text", "needs", "annotating", "for", "NLP", "training"]}
value={[{ start: 5, end: 6, tag: "TOPIC", color: "#EEE" }]}
renderMark={ *YourCustomComponent* }
/>
You will get an error due to the way props is currently passed down in the source code, but you can ignore it.
Warning: React does not recognize the `renderMark` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `rendermark` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
This is found in the current source code:
const {tokens, value, onChange, getSpan: _, ...divProps} = props
const splits = splitTokensWithOffsets(tokens, value)
return (
<div {...divProps} onMouseUp={handleMouseUp}>
{splits.map((split, i) =>
split.mark ? (
renderMark({
key: `${split.start}-${split.end}`,
...split,
onClick: handleSplitClick,
})
) : (
<Token key={split.i} {...split} />
)
)}
</div>
)
}
where renderMark
is thrown in as divProps
, but it will work.
from react-text-annotate.
Related Issues (17)
- After highlighting, tokens are squished together if token is paragraph HOT 1
- Type is not assignable to type Tokenspan
- [Question] Is it possible to annotate relations between entities?
- [Question] HOT 6
- Mobile-friendly?
- License?
- How do I draw annotations for a simple sentence HOT 1
- Custom mark render function `renderMark` should be in documentation HOT 1
- Display Labels side by side (with the different colors) instead of a list
- how to set default value of tag and value based on an input from an another app HOT 1
- Cannot annotate using mobile devicce
- Annotate HTML HOT 1
- dependency issues in react
- Custom `renderMark` for TextAnnotator HOT 8
- [Question] Token position based on character position HOT 2
- [Question] Is it possible to stop user annotate of text by passing prop HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-text-annotate.