A simple zero-dependency React component for tagging user-defined entities within a block of text.
Visit the demo page and click on 'knobs' at the bottom to get a feel for how adjusting certain props effects the rendered component.
npm i --save react-taggy
or yarn add react-taggy
import Taggy from 'react-taggy'
const Taggy = require('react-taggy').default
text
: (string || array) The text that will be displayed. May be a string, or an array of tokens.spans
: (array) The locations within the text that will get tagged. If text
is a string, then start
and end
must be provided and refer to character indices. If text
is an array of tokens, then index
must be provided and refers to token index.ents
: (array) The allowable entity types and the color of each unique tag type. If spans
contains a type
that's not included in the ents
array, then the color will be set to gray by default.text
is a string<Taggy text={text} spans={spans} ents={ents} />
const text = 'Michael Jordan ate lunch yesterday in Chicago.'
const spans = [
{start: 0, end: 14, type: 'person'},
{start: 25, end: 34, type: 'date'},
{start: 38, end: 45, type: 'location'}
]
const ents = [
{type: 'person', color: {r: 166, g: 226, b: 45}},
{type: 'location', color: {r: 67, g: 198, b: 252}},
{type: 'date', color: {r: 47, g: 187, b: 171}}
]
text
is an array<Taggy text={text} spans={spans} ents={ents} />
const text = ['Michael', 'Jordan', 'ate', 'lunch', 'yesterday', 'in', 'Chicago', '.']
const spans = [
{type: 'person', index: 0},
{type: 'person', index: 1},
{type: 'date', index: 4},
{type: 'location', index: 6}
]
const ents = [
{type: 'person', color: {r: 166, g: 226, b: 45}},
{type: 'location', color: {r: 67, g: 198, b: 252}},
{type: 'date', color: {r: 47, g: 187, b: 171}}
]
All contributors will receive proper attribution, as outlined in the awesome All-Contributors specification developed by open-source superstar Kent C. Dodds.
This component was bootstrapped with React CDK. Please refer to React CDK documentation) to get started with the development.
This project is originally a fork of displacy-ent by the guys over at ExplosionAI. Now with 100% more React awesomeness!
react-taggy is available under BSD. See LICENSE for more details.
start
and end
keys, rather than a single index
key. This will match the string API and will enable multi-word entities without relying on the built-in auto-aggregation.ents
and spans
props are not provided. The text
should just render like a normal <p>
tag. Heck, even the text
prop should be optional, and if it's not provided the component will just render like an empty <p>
tag would.ents
array.[
'The',
'quick',
'brown',
{
token: 'fox',
type: 'animal',
color: {r: 47, g: 187, b: 171}
},
'jumped',
'over',
'the'
'lazy',
{
token: 'dog',
type: 'animal',
color: {r: 47, g: 187, b: 171}
},
'.'
]