
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-taggy
Advanced tools
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}
},
'.'
]
FAQs
A simple zero-dependency React component for tagging user-defined entities within a block of text.
The npm package react-taggy receives a total of 39 weekly downloads. As such, react-taggy popularity was classified as not popular.
We found that react-taggy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.