{"id":22143441,"url":"https://github.com/hc-oss/react-tag-input-component","last_synced_at":"2025-04-06T14:12:29.613Z","repository":{"id":46295851,"uuid":"321433499","full_name":"hc-oss/react-tag-input-component","owner":"hc-oss","description":"lightweight react component for tag(s) input","archived":false,"fork":false,"pushed_at":"2024-04-16T15:29:34.000Z","size":448,"stargazers_count":75,"open_issues_count":26,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-01T15:59:07.950Z","etag":null,"topics":["hacktoberfest","input","lightweight","react","tag","tags","tiny"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-tag-input-component-rgf97","language":"TypeScript","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/hc-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"harshzalavadiya"}},"created_at":"2020-12-14T18:11:28.000Z","updated_at":"2024-06-18T13:55:55.757Z","dependencies_parsed_at":"2024-06-18T13:55:34.225Z","dependency_job_id":"a7fcd3ae-9ac1-4153-9580-66e6235730f9","html_url":"https://github.com/hc-oss/react-tag-input-component","commit_stats":{"total_commits":30,"total_committers":4,"mean_commits":7.5,"dds":"0.33333333333333337","last_synced_commit":"861e4e760d080d418724bd63d84e9288617ff082"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-tag-input-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-tag-input-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-tag-input-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hc-oss%2Freact-tag-input-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hc-oss","download_url":"https://codeload.github.com/hc-oss/react-tag-input-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492557,"owners_count":20947545,"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":["hacktoberfest","input","lightweight","react","tag","tags","tiny"],"created_at":"2024-12-01T22:10:57.330Z","updated_at":"2025-04-06T14:12:29.591Z","avatar_url":"https://github.com/hc-oss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/harshzalavadiya"],"categories":[],"sub_categories":[],"readme":"# react-tag-input-component\n\nlightweight component for tag(s) input\n\n[![GitHub Actions Status](https://github.com/harshzalavadiya/react-tag-input-component/workflows/CI/badge.svg)](https://github.com/harshzalavadiya/react-tag-input-component/actions)\n[![NPM](https://img.shields.io/npm/v/react-tag-input-component.svg)](https://npm.im/react-tag-input-component)\n[![gzip](https://badgen.net/bundlephobia/minzip/react-tag-input-component@latest)](https://bundlephobia.com/result?p=react-tag-input-component@latest)\n\nalso see [multi select component](https://github.com/harshzalavadiya/react-multi-select-component)\n\n## ✨ Features\n\n- 🍃 Lightweight (2KB including styles 😎)\n- 💅 Themeable\n- ✌ Written w/ TypeScript\n- 🗑️ Use Backspace to remove last tag\n\n## 🔧 Installation\n\n```bash\nnpm i react-tag-input-component    # npm\nyarn add react-tag-input-component # yarn\n```\n\n## 📦 Example\n\n![Example](https://user-images.githubusercontent.com/5774849/179722762-4d7feef6-52af-4662-ba97-129191fb4f26.gif)\n\n[![Edit react-tag-input-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-tag-input-component-rgf97?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```tsx\nimport React, { useState } from \"react\";\nimport { TagsInput } from \"react-tag-input-component\";\n\nconst Example = () =\u003e {\n  const [selected, setSelected] = useState([\"papaya\"]);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eAdd Fruits\u003c/h1\u003e\n      \u003cpre\u003e{JSON.stringify(selected)}\u003c/pre\u003e\n      \u003cTagsInput\n        value={selected}\n        onChange={setSelected}\n        name=\"fruits\"\n        placeHolder=\"enter fruits\"\n      /\u003e\n      \u003cem\u003epress enter or comma to add new tag\u003c/em\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Example;\n```\n\n## 👀 Props\n\n| Prop                | Description                                                                     | Type                                               | Default         |\n| ------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | --------------- |\n| `name`              | value for name of input                                                         | `string`                                           |                 |\n| `placeholder`       | placeholder for text input                                                      | `string`                                           |                 |\n| `value`             | initial tags                                                                    | `string[]`                                         | `[]`            |\n| `onChange`          | onChange callback (added/removed)                                               | `string[]`                                         |                 |\n| `classNames`        | className for styling input and tags (i.e {tag:'tag-cls', input: 'input-cls'})  | `object[tag, input]`                               |                 |\n| `onKeyUp`           | input `onKeyUp` callback                                                        | `event`                                            |                 |\n| `onBlur`            | input `onBlur` callback                                                         | `event`                                            |                 |\n| `separators`         | when to add tag (i.e. `\"Enter\"`, `\" \"`)                                        | `string[]`                                         | `[\"Enter\"]`     |\n| `removers`          | Remove last tag if textbox empty and `Backspace` is pressed                     | `string[]`                                         | `[\"Backspace\"]` |\n| `onExisting`        | if tag is already added then callback                                           | `(tag: string) =\u003e void`                            |                 |\n| `onRemoved`         | on tag removed callback                                                         | `(tag: string) =\u003e void`                            |                 |\n| `beforeAddValidate` | Custom validation before adding tag                                             | `(tag: string, existingTags: string[]) =\u003e boolean` |                 |\n| `isEditOnRemove`    | Remove the tag but keep the word in the input to edit it on using Backscape Key | `boolean`                                          | `false`         |\n\n## 💅 Themeing\n\nYou can override CSS variables to customize the appearance\n\n```css\n.rti--container {\n  --rti-bg: \"#fff\",\n  --rti-border: \"#ccc\",\n  --rti-main: \"#3182ce\",\n  --rti-radius: \"0.375rem\",\n  --rti-s: \"0.5rem\", /* spacing */\n  --rti-tag: \"#edf2f7\",\n  --rti-tag-remove: \"#e53e3e\",\n}\n```\n\n\u003e use `!important` if CSS variables are not getting applied\n\n## 🤠 Credits\n\n- [TypeScript](https://github.com/microsoft/typescript)\n- [TSDX](https://github.com/jaredpalmer/tsdx)\n- [Goober](https://github.com/cristianbote/goober)\n\n## 📜 License\n\nMIT \u0026copy; [harshzalavadiya](https://github.com/harshzalavadiya)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Freact-tag-input-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhc-oss%2Freact-tag-input-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc-oss%2Freact-tag-input-component/lists"}