{"id":13521448,"url":"https://github.com/jcubic/tagger","last_synced_at":"2025-05-16T12:04:55.559Z","repository":{"id":41094922,"uuid":"180881769","full_name":"jcubic/tagger","owner":"jcubic","description":"Zero Dependency, Vanilla JavaScript Tag Editor","archived":false,"fork":false,"pushed_at":"2024-09-12T15:44:54.000Z","size":99,"stargazers_count":362,"open_issues_count":7,"forks_count":20,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-29T15:49:15.220Z","etag":null,"topics":["component","editor","hacktoberfest","interface","javascript","ui","ui-component","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcubic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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}},"created_at":"2019-04-11T21:37:46.000Z","updated_at":"2024-10-23T06:41:38.000Z","dependencies_parsed_at":"2024-08-26T06:05:34.978Z","dependency_job_id":"d92e9435-5482-4f5d-b9a2-04e1def93b51","html_url":"https://github.com/jcubic/tagger","commit_stats":{"total_commits":79,"total_committers":11,"mean_commits":7.181818181818182,"dds":0.3417721518987342,"last_synced_commit":"1dcd86e48013d004fd4fc8f74d201058a3c32ee3"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Ftagger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Ftagger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Ftagger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcubic%2Ftagger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcubic","download_url":"https://codeload.github.com/jcubic/tagger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247237678,"owners_count":20906329,"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","editor","hacktoberfest","interface","javascript","ui","ui-component","widget"],"created_at":"2024-08-01T06:00:34.502Z","updated_at":"2025-05-16T12:04:55.553Z","avatar_url":"https://github.com/jcubic.png","language":"JavaScript","readme":"```\n  _____\n |_   _|___ ___ ___ ___ ___\n   | | | .'| . | . | -_|  _|\n   |_| |__,|_  |_  |___|_|\n           |___|___|   version 0.6.2\n```\n# [Tagger: Zero dependency, Vanilla JavaScript Tag Editor](https://github.com/jcubic/tagger)\n\n[![npm](https://img.shields.io/badge/npm-0.6.2-blue.svg)](https://www.npmjs.com/package/@jcubic/tagger)\n\n![Tag Editor widget in JavaScript](https://raw.githubusercontent.com/jcubic/tagger/master/screenshot.png)\n\nTagger was inspired by StackOverflow tag editor. It supposed to be a part of similar QA website that was never created.\n\n[Online Demo](https://codepen.io/jcubic/pen/YbYpqO)\n\n## Installation\n\n```\nnpm install @jcubic/tagger\n```\n\nor\n\n```\nyarn add @jcubic/tagger\n```\n\n## Usage\n\n```\ntagger(document.querySelector('[name=\"tags\"]'), {allow_spaces: false});\n```\n\nMultiple inputs can be created by passing a NodeList or array of elements (eg. document.querySelectorAll()). If only one element is contained in the list then tagger will return the tagger instance, an array of tagger instances will be returned if the number of elements is greater than 1.\n\n## Usage with React\n\nTagger can easily be used with ReactJS.\n\n```javascript\nimport { useRef, useState, useEffect } from 'react'\nimport tagger from '@jcubic/tagger'\n\nconst App = () =\u003e {\n    const [tags, setTags] = useState([]);\n    const inputRef = useRef(null);\n\n    useEffect(() =\u003e {\n        const taggerOptions = {\n            allow_spaces: true,\n        };\n        tagger(inputRef.current, taggerOptions);\n        onChange();\n    }, [inputRef]);\n\n    const onChange = () =\u003e {\n        setTags(tags_array(inputRef.current.value));\n    };\n\n    return (\n        \u003cdiv className=\"app\"\u003e\n            \u003cinput type=\"text\" ref={inputRef} onChange={onChange} defaultValue=\"charles, louis, michel\" /\u003e\n            \u003cbr/\u003e\n            \u003cul\u003e\n                {tags.map((tag, index) =\u003e \u003cli key={`${tag}-${index}`}\u003e{tag}\u003c/li\u003e)}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    )\n}\n\nfunction tags_array(str) {\n    return str.split(/\\s*,\\s*/).filter(Boolean);\n}\n\nexport default App\n```\n\nSee demo in action on [CodePen](https://codepen.io/jcubic/pen/YzRdbmp?editors=0010).\n\n## API\n\n### methods:\n\n* `add_tag(string): boolean`\n* `remove_tag(string): booelan`\n* `complete(string): void`\n\n### Options:\n\n* **wrap** (default false) allow tags to wrap onto new lines instead of overflow scroll\n* **allow_duplicates** (default false)\n* **allow_spaces** (default true)\n* **add_on_blur** (default false)\n* **completion** `{list: string[] | function(): Promise(string[])|string[], delay: miliseconds, min_length: number}`\n* **link** `function(name): string|false` it should return what should be in href attribute or false\n* **tag_limit** `number` (default -1) limit number of tags, when set to -1 there are no limits\n* **placeholder** `string` (default unset) If set in options or on the initial input, this placeholder value will be shown in the tag entry input\n* **filter** `function(name): string` it should return the tag name after applying any filters (eg String.toUpperCase()), empty string to filter out tag and prevent creation.\n\n**NOTE:** if you're familiar with TypeScript you can check the API by looking at\nTypeScript definition file:\n\n[tagger.d.ts](https://github.com/jcubic/tagger/blob/master/tagger.d.ts)\n\n## Press\n* JavaScript Weekly\n  * [Issue #527](https://javascriptweekly.com/issues/527)\n  * [Issue #652](https://javascriptweekly.com/issues/652)\n* [Web Tools Weekly](https://webtoolsweekly.com/archives/issue-396/)\n* [Minimal Tagging Input In Pure JavaScript – Tagger](https://www.cssscript.com/tagging-input-tagger/)\n* [Frontend Focus #657](https://frontendfoc.us/issues/657)\n\n## License\n\nCopyright (c) 2018-2024 [Jakub T. Jankiewicz](https://jcubic.pl/me)\u003cbr/\u003e\nReleased under the MIT license\n","funding_links":[],"categories":["Members","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Ftagger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcubic%2Ftagger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcubic%2Ftagger/lists"}