npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-taggy

v0.1.12

Published

A simple zero-dependency React component for tagging user-defined entities within a block of text.

Downloads

125

Readme

react-taggy action shot

A simple zero-dependency React component for tagging user-defined entities within a block of text.

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