{"id":14384616,"url":"https://github.com/johncmunson/react-taggy","last_synced_at":"2025-08-23T17:32:58.601Z","repository":{"id":41322151,"uuid":"89868246","full_name":"johncmunson/react-taggy","owner":"johncmunson","description":"A simple zero-dependency React component for tagging user-defined entities within a block of text.","archived":false,"fork":false,"pushed_at":"2023-02-25T13:53:35.000Z","size":744,"stargazers_count":35,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-12T16:42:08.529Z","etag":null,"topics":["component","entities","named-entity-recognition","natural-language","ner","nlp","react","react-component"],"latest_commit_sha":null,"homepage":"https://johncmunson.github.io/react-taggy/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johncmunson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-30T18:11:50.000Z","updated_at":"2024-05-07T17:26:08.000Z","dependencies_parsed_at":"2024-01-14T20:17:06.747Z","dependency_job_id":"99a6c3ec-6570-4fb8-8174-0b1715956393","html_url":"https://github.com/johncmunson/react-taggy","commit_stats":{"total_commits":25,"total_committers":1,"mean_commits":25.0,"dds":0.0,"last_synced_commit":"7624ca2cc2145a2e31dda9ffce6812a440e4e727"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johncmunson%2Freact-taggy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johncmunson%2Freact-taggy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johncmunson%2Freact-taggy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johncmunson%2Freact-taggy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johncmunson","download_url":"https://codeload.github.com/johncmunson/react-taggy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230716579,"owners_count":18269795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","entities","named-entity-recognition","natural-language","ner","nlp","react","react-component"],"created_at":"2024-08-28T18:01:31.076Z","updated_at":"2024-12-21T12:30:45.748Z","avatar_url":"https://github.com/johncmunson.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![react-taggy](./images/reacttaggy.jpg \"React Taggy\")\n![action shot](./images/actionshot.jpg \"Action Shot\")\n\n#### A simple zero-dependency React component for tagging user-defined entities within a block of text. Older brother to [React Taggy Jr](https://github.com/johncmunson/react-taggy-jr).\n\n## Demo\nVisit the [demo page](https://johncmunson.github.io/react-taggy/) and click on 'knobs' at the bottom to get a feel for how adjusting certain props effects the rendered component.\n\n## Install\n\n`npm i --save react-taggy` or `yarn add react-taggy`\n\n## Basic Usage\n\n#### ES6\n`import Taggy from 'react-taggy'`\n\n#### Node Modules\n`const Taggy = require('react-taggy').default`\n\n#### Props\n- `text`: (string || array) The text that will be displayed. May be a string, or an array of tokens.\n- `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.\n- `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.\n\n#### Example usage where `text` is a string\n```javascript\n\u003cTaggy text={text} spans={spans} ents={ents} /\u003e\n\nconst text = 'Michael Jordan ate lunch yesterday in Chicago.'\n\nconst spans = [\n    {start: 0, end: 14, type: 'person'},\n    {start: 25, end: 34, type: 'date'},\n    {start: 38, end: 45, type: 'location'}\n]\n\nconst ents = [\n    {type: 'person', color: {r: 166, g: 226, b: 45}},\n    {type: 'location', color: {r: 67, g: 198, b: 252}},\n    {type: 'date', color: {r: 47, g: 187, b: 171}}\n]\n```\n\n#### Example usage where `text` is an array\n```javascript\n\u003cTaggy text={text} spans={spans} ents={ents} /\u003e\n\nconst text = ['Michael', 'Jordan', 'ate', 'lunch', 'yesterday', 'in', 'Chicago', '.']\n\nconst spans = [\n  {type: 'person', index: 0},\n  {type: 'person', index: 1},\n  {type: 'date', index: 4},\n  {type: 'location', index: 6}\n]\n\nconst ents = [\n    {type: 'person', color: {r: 166, g: 226, b: 45}},\n    {type: 'location', color: {r: 67, g: 198, b: 252}},\n    {type: 'date', color: {r: 47, g: 187, b: 171}}\n]\n```\n\n## Contributions\n\nAll contributors will receive proper attribution, as outlined in the awesome [All-Contributors](https://github.com/kentcdodds/all-contributors) specification developed by open-source superstar [Kent C. Dodds](https://twitter.com/kentcdodds?lang=en).\n\n## Development Setup\n\nThis component was bootstrapped with [React CDK](https://github.com/kadirahq/react-cdk). Please refer to [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development.\n\n## Inspiration\n\nThis project is originally a fork of [displacy-ent](https://github.com/explosion/displacy-ent) by the guys over at [ExplosionAI](https://explosion.ai/). Now with 100% more React awesomeness!\n\n## License\n\n*react-taggy* is available under BSD. See LICENSE for more details.\n\n## To-Do\n- 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.\n- ~~The component should not fail if the `ents` and `spans` props are not provided. The `text` should just render like a normal `\u003cp\u003e` tag. Heck, even the `text` prop should be optional, and if it's not provided the component will just render like an empty `\u003cp\u003e` tag would.~~\n- Unit tests, snapshot tests, etc.\n- ~~Set default color to gray if an entity is not found in the `ents` array.~~\n- Similar to the above bullet point, add option to ignore entities not found in the ents array, and just display normal text.\n- Add ability to disable auto-aggregation\n- ~~Create a sister project where the component is just a single tag... React Taggy Jr.~~\n- 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.\n```javascript\n[\n    'The',\n    'quick',\n    'brown',\n    {\n        token: 'fox',\n        type: 'animal',\n        color: {r: 47, g: 187, b: 171}\n    },\n    'jumped',\n    'over',\n    'the'\n    'lazy',\n    {\n        token: 'dog',\n        type: 'animal',\n        color: {r: 47, g: 187, b: 171}\n    },\n    '.'\n]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohncmunson%2Freact-taggy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohncmunson%2Freact-taggy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohncmunson%2Freact-taggy/lists"}