{"id":13422123,"url":"https://github.com/olahol/react-tagsinput","last_synced_at":"2025-05-14T07:08:08.275Z","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":"2023-06-10T19:25:45.000Z","size":1731,"stargazers_count":1360,"open_issues_count":19,"forks_count":235,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-11T01:20:09.206Z","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,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2014-06-24T07:54:19.000Z","updated_at":"2025-04-09T13:58:06.000Z","dependencies_parsed_at":"2024-01-25T05:09:19.950Z","dependency_job_id":"69e58195-2d3d-4e0e-b77c-ac3448579975","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":69,"template":false,"template_full_name":null,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092655,"owners_count":22013290,"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":["input","javascript","react","tags","tagsinput"],"created_at":"2024-07-30T23:00:37.413Z","updated_at":"2025-05-14T07:08:08.232Z","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 React from 'react'\nimport TagsInput from 'react-tagsinput'\n\nimport 'react-tagsinput/react-tagsinput.css'\n\nclass Example extends React.Component {\n  constructor() {\n    super()\n    this.state = {tags: []}\n  }\n\n  handleChange = (tags) =\u003e {\n    this.setState({tags})\n  }\n\n  render() {\n    return \u003cTagsInput value={this.state.tags} onChange={this.handleChange} /\u003e\n  }\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 `[9, 13]` (Tab and 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 key codes that remove a tag, default is `[8]` (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"}