{"id":16420808,"url":"https://github.com/cinaaaa/react-tagify","last_synced_at":"2025-04-09T15:08:58.139Z","repository":{"id":46785849,"uuid":"227591017","full_name":"cinaaaa/react-tagify","owner":"cinaaaa","description":" ✨ Empower React applications with effortless #tag and @mention support","archived":false,"fork":false,"pushed_at":"2025-01-22T09:37:13.000Z","size":1508,"stargazers_count":30,"open_issues_count":5,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-09T15:08:54.438Z","etag":null,"topics":["component","hashtags","highlight","highlighting","mentions","react","react-tagify","tagify"],"latest_commit_sha":null,"homepage":"https://react-tagify-site.vercel.app","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/cinaaaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2019-12-12T11:28:29.000Z","updated_at":"2025-01-19T14:06:41.000Z","dependencies_parsed_at":"2023-02-04T07:01:11.721Z","dependency_job_id":"2134a30f-2e51-4f43-a477-51abedaded20","html_url":"https://github.com/cinaaaa/react-tagify","commit_stats":{"total_commits":156,"total_committers":9,"mean_commits":"17.333333333333332","dds":0.6346153846153846,"last_synced_commit":"879cdf5c7253e13b7b70e087a6046766e2bb86e1"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinaaaa%2Freact-tagify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinaaaa%2Freact-tagify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinaaaa%2Freact-tagify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinaaaa%2Freact-tagify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cinaaaa","download_url":"https://codeload.github.com/cinaaaa/react-tagify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055282,"owners_count":21040157,"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","hashtags","highlight","highlighting","mentions","react","react-tagify","tagify"],"created_at":"2024-10-11T07:29:13.528Z","updated_at":"2025-04-09T15:08:58.117Z","avatar_url":"https://github.com/cinaaaa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Tagify Promo Tweet](https://github.com/cinaaaa/react-tagify/blob/refactor/new/packages/site/src/assets/promo-tweet.png)\n# ✨ React Tagify #️@\nEmpower your React applications with effortless \u003cspan style=\"color: blue\"\u003e#tag\u003c/span\u003e and  \u003cspan style=\"color: blue\"\u003e@mention\u003c/span\u003e support ❤️\n\u003cbr /\u003e\n\u003cimg src=\"https://img.shields.io/github/package-json/v/cinaaaa/react-tagify/master?color=green\u0026label=Version\u0026style=flat-square\"/\u003e\n\nReact Tagify is a powerful and pure React component for handling hashtags and mentions in your React app with ease. Give your users the ability to mention others and add tags to their content seamlessly.\n\nFor more information and demo, visit our website [here](https://react-tagify-site.vercel.app).\n\n## Features\n\n- 🚀 Easy to integrate\n- 🎨 Customizable colors and styles\n- 🔗 Supports #HashTags and @Mentions\n- 📦 Lightweight\n\n## Installation\n\nInstall the package using npm or yarn:\n\n```bash\nnpm i react-tagify\n```\n\nor \n\n```bash\nyarn add react-tagify\n```\n## Usage\n\n1. Import the Tagify component:\n\n```js\nimport { Tagify } from 'react-tagify';\n```\n\n2. Wrap your content with the Tagify component:\n\n```jsx\n\u003cTagify\n  onClick={(text, type) =\u003e console.log(text, type)}\n\u003e\n  \u003cp\u003e\n    This is a #React component with help of #ReactTagify!\n  \u003c/p\u003e\n\u003c/Tagify\u003e\n```\n\n## Props\n\n| Prop           | Type     | Default | Description                                                       |\n|----------------|----------|---------|-------------------------------------------------------------------|\n| children       | ReactNode |   -     | The content to be processed for tags and mentions.                |\n| color         | string   | '#0073e6' | The color of the tags and mentions.                               |\n| onClick        | function |   -     | A callback function that is called when a tag or mention is clicked. Receives the clicked element as an argument and type of it |\n| tagStyle       | object   |   -     | The CSS style object for hashtag styling.                         |\n| mentionStyle   | object   |   -     | The CSS style object for mention styling.                         |\n| detectHashtags | boolean  |  true   | Enable or disable the detection of hashtags.                      |\n| detectMentions | boolean  |  true   | Enable or disable the detection of mentions.                      |\n\n\n## Contributing\nPlease feel free to contribute by submitting a pull request or reporting any issues you encounter while using this component.\n\n## License\nReact Tagify is licensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcinaaaa%2Freact-tagify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcinaaaa%2Freact-tagify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcinaaaa%2Freact-tagify/lists"}