{"id":13422123,"url":"https://github.com/olahol/react-tagsinput","last_synced_at":"2026-10-19T13:49:01.243Z","repository":{"id":18090861,"uuid":"21156641","full_name":"olahol/react-tagsinput","owner":"olahol","description":"Highly customizable React component for inputing tags.","archived":false,"fork":false,"pushed_at":"2026-10-04T15:37:59.000Z","size":1901,"stargazers_count":1355,"open_issues_count":19,"forks_count":229,"subscribers_count":20,"default_branch":"master","last_synced_at":"2026-10-13T03:28:31.030Z","etag":null,"topics":["input","javascript","react","tags","tagsinput"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olahol.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"accessibility":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"claude":null,"gemini":null,"cursor":null,"copilot":null,"dco":null,"cla":null,"disclosure":null}},"created_at":"2014-06-24T07:54:19.000Z","updated_at":"2026-10-12T12:10:13.000Z","dependencies_parsed_at":"2026-10-13T03:36:04.873Z","dependency_job_id":null,"html_url":"https://github.com/olahol/react-tagsinput","commit_stats":{"total_commits":215,"total_committers":47,"mean_commits":4.574468085106383,"dds":"0.45581395348837206","last_synced_commit":"56649463a4465585ace635780028facb7949a5c0"},"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"purl":"pkg:github/olahol/react-tagsinput","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-tagsinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-tagsinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-tagsinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-tagsinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olahol","download_url":"https://codeload.github.com/olahol/react-tagsinput/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freact-tagsinput/sbom","scorecard":{"id":704464,"data":{"date":"2025-08-11","repo":{"name":"github.com/olahol/react-tagsinput","commit":"48742e78a07de11a356d95c87b34e1c532c8cc71"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"name":"Code-Review","score":0,"reason":"Found 2/27 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/coverage.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":4,"reason":"dependency not pinned by hash detected -- score normalized to 4","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/olahol/react-tagsinput/coverage.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coverage.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/olahol/react-tagsinput/coverage.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/coverage.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/olahol/react-tagsinput/coverage.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"18 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T06:07:50.609Z","repository_id":18090861,"created_at":"2025-08-22T06:07:50.610Z","updated_at":"2025-08-22T06:07:50.610Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344794859,"owners_count":38300124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-14T02:00:06.392Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["input","javascript","react","tags","tagsinput"],"created_at":"2024-07-30T23:00:37.413Z","updated_at":"2026-10-19T13:49:01.235Z","avatar_url":"https://github.com/olahol.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","Awesome React","JavaScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components","Uncategorized","Tools"],"readme":"# react-tagsinput\n\n[![NPM version][npm-image]][npm-url]\n[![Size][size-image]][size-url]\n[![Code coverage][codecov-image]][codecov-url]\n[![Download count][downloads-image]][downloads-url]\n[![js-standard-style][standard-image]][standard-url]\n\nHighly customizable [React](http://facebook.github.io/react/index.html) component for inputing tags.\n\n![Demo](./example/demo.gif)\n\n## Example\n\n```javascript\nimport {useState} from 'react'\nimport TagsInput from 'react-tagsinput'\n\nimport 'react-tagsinput/react-tagsinput.css'\n\nfunction Example () {\n  const [tags, setTags] = useState([])\n\n  return \u003cTagsInput value={tags} onChange={setTags} /\u003e\n}\n```\n\n## Table of Contents\n\n  * [Example](#example)\n  * [Styling](#styling)\n  * [Component Interface](#component-interface)\n    * [Props](#props)\n      * [value (required)](#value-required)\n      * [onChange (required)](#onchange-required)\n      * [onChangeInput](#onchangeinput)\n      * [addKeys](#addkeys)\n      * [currentValue](#currentvalue)\n      * [inputValue](#inputvalue)\n      * [onlyUnique](#onlyunique)\n      * [validate](#validate)\n      * [validationRegex](#validationregex)\n      * [onValidationReject](#onvalidationreject)\n      * [disabled](#disabled)\n      * [maxTags](#maxtags)\n      * [addOnBlur](#addonblur)\n      * [addOnPaste](#addonpaste)\n      * [pasteSplit](#pastesplit)\n      * [removeKeys](#removekeys)\n      * [tagProps](#tagprops)\n      * [inputProps](#inputprops)\n      * [renderTag](#rendertag)\n      * [renderInput](#renderinput)\n      * [renderLayout](#renderlayout)\n      * [preventSubmit](#preventSubmit)\n    * [Methods](#methods)\n      * [focus()](#focus)\n      * [blur()](#blur)\n      * [accept()](#accept)\n      * [addTag()](#addTag)\n      * [clearInput()](#clearInput)\n  * [Contributors](#contributors)\n  * [Changelog](#changelog)\n  * [License](#license)\n\n## Styling\n\nLook at [react-tagsinput.css](./react-tagsinput.css) for a basic style.\n\n## Component Interface\n\n### Props\n\n##### value (required)\n\nAn array of tags.\n\n##### onChange (required)\n\nCallback when tags change, gets three arguments `tags` which is the new\ntag array, `changed` which is an array of the tags that have changed and\n`changedIndexes` which is an array of the indexes that have changed.\n\n##### onChangeInput\n\nCallback from the input box, gets one argument `value` which is the content of the input box.\n(onChangeInput is only called if the input box is [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components), for this to happen both inputValue and onChangeInput need to be set)\n\n##### addKeys\n\nAn array of [keys](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) or [key codes](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) that add a tag, default is `['Tab', 'Enter']`.\n\n##### currentValue\n\nA string to set a value on the input.\n\n##### inputValue\n\nSimilar to `currentValue` but needed for controlling the input box. (inputValue is only useful if you use it together with onChangeInput)\n\n##### onlyUnique\n\nAllow only unique tags, default is `false`.\n\n##### validate\n\nAllow only tags that pass this validation function. Gets one argument `tag` which is the tag to validate. Default is `() =\u003e true`.\n\n##### validationRegex\n\nAllow only tags that pass this regex to be added. Default is `/.*/`.\n\n##### onValidationReject\n\nCallback when tags are rejected through validationRegex, passing array of tags as the argument.\n\n##### disabled\n\nPasses the disabled prop to `renderInput` and `renderTag`, by default this\nwill \"disable\" the component.\n\n##### maxTags\n\nAllow limit number of tags, default is `-1` for infinite.\n\n##### addOnBlur\n\nAdd a tag if input blurs. Default false.\n\n##### addOnPaste\n\nAdd a tags if HTML5 paste on input. Default false.\n\n##### pasteSplit\n\nFunction that splits pasted text. Default is:\n\n```javascript\nfunction defaultPasteSplit (data) {\n  return data.split(' ').map(d =\u003e d.trim())\n}\n```\n\n##### removeKeys\n\nAn array of [keys](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) or [key codes](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) that remove a tag, default is `['Backspace']`.\n\n\n##### className\n\nSpecify the wrapper className. Default is `react-tagsinput`.\n\n\n##### focusedClassName\n\nSpecify the class to add to the wrapper when the component is focused. Default is `react-tagsinput--focused`.\n\n\n##### tagProps\n\nProps passed down to every tag component. Default is:\n```javascript\n{\n  className: 'react-tagsinput-tag',\n  classNameRemove: 'react-tagsinput-remove'\n}\n```\n\n##### inputProps\n\nProps passed down to input. Default is:\n\n```javascript\n{\n  className: 'react-tagsinput-input',\n  placeholder: 'Add a tag'\n}\n```\n\n##### tagDisplayProp\n\nThe tags' property to be used when displaying/adding one. Default is: `null` which causes the tags to be an array of strings.\n\n##### renderTag\n\nRender function for every tag. Default is:\n\n```javascript\nfunction defaultRenderTag (props) {\n  let {tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other} = props\n  return (\n    \u003cspan key={key} {...other}\u003e\n      {getTagDisplayValue(tag)}\n      {!disabled \u0026\u0026\n        \u003ca className={classNameRemove} onClick={(e) =\u003e onRemove(key)} /\u003e\n      }\n    \u003c/span\u003e\n  )\n}\n```\n\n##### renderInput\n\nRender function for input. Default is:\n\n```javascript\nfunction defaultRenderInput (props) {\n  let {onChange, value, addTag, ...other} = props\n  return (\n    \u003cinput type='text' onChange={onChange} value={value} {...other} /\u003e\n  )\n}\n```\n\n*Note: renderInput also receives `addTag` as a prop.*\n\n##### renderLayout\n\nRenders the layout of the component. Takes `tagElements` and `inputElement` as args. Default is:\n\n```javascript\nfunction defaultRenderLayout (tagElements, inputElement) {\n  return (\n    \u003cspan\u003e\n      {tagElements}\n      {inputElement}\n    \u003c/span\u003e\n  )\n}\n```\n\n##### preventSubmit\n\nA `boolean` to prevent the default submit event when adding an 'empty' tag.\nDefault: `true`\n\nSet to `false` if you want the default submit to fire when pressing enter again after adding a tag.\n\n### Methods\n\n##### focus()\n\nFocus on input element.\n\n##### blur()\n\nBlur input element.\n\n##### accept()\n\nTry to add whatever value is currently in input element.\n\n##### addTag(tag)\n\nConvenience method that adds a tag.\n\n##### clearInput()\n\nClears the input value.\n\n## Contributors\n\n\u003ca href=\"https://github.com/olahol/react-tagsinput/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=olahol/react-tagsinput\" /\u003e\n\u003c/a\u003e\n\n\n## [Changelog](./CHANGELOG.md)\n\n## [License](./LICENSE)\n\n---\n\n[MIT Licensed](https://tldrlegal.com/license/mit-license)\n\n\n[npm-image]: https://img.shields.io/npm/v/react-tagsinput.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/react-tagsinput\n[downloads-image]: http://img.shields.io/npm/dm/react-tagsinput.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/react-tagsinput\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n[size-image]: https://img.badgesize.io/olahol/react-tagsinput/master/react-tagsinput.js.svg?style=flat-square\n[size-url]: https://github.com/olahol/react-tagsinput/blob/master/react-tagsinput.js\n[codecov-image]: https://img.shields.io/codecov/c/github/olahol/react-tagsinput?style=flat-square\n[codecov-url]: https://app.codecov.io/github/olahol/react-tagsinput\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freact-tagsinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folahol%2Freact-tagsinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freact-tagsinput/lists"}