johncmunson / react-taggy

A simple zero-dependency React component for tagging user-defined entities within a block of text. Older brother to React Taggy Jr.

Demo

Visit the demo page and click on 'knobs' at the bottom to get a feel for how adjusting certain props effects the rendered component.

Install

npm i --save react-taggy or yarn add react-taggy

Basic Usage

ES6

import Taggy from 'react-taggy'

Node Modules

const Taggy = require('react-taggy').default

Props

• 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.

Example usage where 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}}
]

Example usage where 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}}
]

Contributions

All contributors will receive proper attribution, as outlined in the awesome All-Contributors specification developed by open-source superstar Kent C. Dodds.

Development Setup

This component was bootstrapped with React CDK. Please refer to React CDK documentation) to get started with the development.

Inspiration

This project is originally a fork of displacy-ent by the guys over at ExplosionAI. Now with 100% more React awesomeness!

License

react-taggy is available under BSD. See LICENSE for more details.

To-Do

• Change the array API to to accept an array of objects that contain 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.
• The component should not fail if the 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.
• Unit tests, snapshot tests, etc.
• Set default color to gray if an entity is not found in the ents array.
• Similar to the above bullet point, add option to ignore entities not found in the ents array, and just display normal text.
• Add ability to disable auto-aggregation
• Create a sister project where the component is just a single tag... React Taggy Jr.
• Create a third API that accepts a single array prop that contains both tokens and entities. The example below mixes strings and objects, but an array of strictly objects would make sense as well.

[
    '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}
    },
    '.'
]