{"id":21634493,"url":"https://github.com/mulaza/badge-tags.js","last_synced_at":"2026-04-11T21:48:38.831Z","repository":{"id":119045768,"uuid":"363807627","full_name":"Mulaza/Badge-Tags.js","owner":"Mulaza","description":"BadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.","archived":false,"fork":false,"pushed_at":"2021-07-23T18:02:09.000Z","size":207,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T13:44:21.899Z","etag":null,"topics":["component","component-library","javascript","javascript-library","library","ui-components","webdevelopment"],"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/Mulaza.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-05-03T03:35:41.000Z","updated_at":"2021-07-23T18:02:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"90b31624-d750-4ab5-87ff-ff793b95d744","html_url":"https://github.com/Mulaza/Badge-Tags.js","commit_stats":null,"previous_names":["mulaza/hashtags"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mulaza%2FBadge-Tags.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mulaza%2FBadge-Tags.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mulaza%2FBadge-Tags.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mulaza%2FBadge-Tags.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mulaza","download_url":"https://codeload.github.com/Mulaza/Badge-Tags.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244320329,"owners_count":20434090,"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","component-library","javascript","javascript-library","library","ui-components","webdevelopment"],"created_at":"2024-11-25T03:16:54.477Z","updated_at":"2026-04-11T21:48:38.775Z","avatar_url":"https://github.com/Mulaza.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Badge Tags.js\n![2](https://user-images.githubusercontent.com/60890281/119446452-0c411000-bd61-11eb-87a1-9f9ef3b402b5.png)\n\n\n## About\nBadgeTags.js is a javascript library that helps turn your flagged keywords into mobile badge tags.\n\n## Install\n### NPM\n![](https://img.shields.io/npm/v/badgetags?style=flat-square)\n\nTo install this package with NPM run the command below and link the needed javascript and css into your html file.\n```text\nnpm i badgetags --save\n```\n\n### Direct Download\nTo use this package you need to link the needed javascript file into your html file.\n\nBecause the library looks over the the page content for specific classes, place the script tag at the bottom of your HTML file or add the `defer` keyword to the tag, so the script will load after the HTML content.\n```html\n  \u003cscript src=\"/dist/js/all.js\"\u003e\u003c/script\u003e\n```\n\n## How To Use\nCreate a div with your desired words in it starting with a `#` value by adding the `data-badge-tags` data attribute and giving it a value of `active`.\n\nNOTE: all words not starting with the `#` hash sign will not displayed as badges.\n\n```html\n  \u003cdiv data-badge-tags=\"active\"\u003e\n      I was in #Florida all #weekend at the #beach.    \n  \u003c/div\u003e\n```\n\nIn a separate javascript file create an instance of the the `BadgeTags` class. And you're done. \n\n\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg height=\"50\" src=\"https://user-images.githubusercontent.com/60890281/119476429-a2d0f980-bd80-11eb-9106-ef7d4b66131e.png\" alt=\"Material Bread logo\"\u003e\n\n\u003c/p\u003e\n\n```javascript\n// Tags Instance\nconst tags = new BadgeTags();\n```\n\n## API\nThe tags class object takes one object witch is used to change the apperance and functionality of the created badge tags.\n\n\n\n### Background Color\nThe `backgroundColor` property is used to assign a single background color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to `#f0f0f0` if no value is defined.\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg height=\"50\" src=\"https://user-images.githubusercontent.com/60890281/119476427-a19fcc80-bd80-11eb-81ef-38d4076b54a0.png\" alt=\"Material Bread logo\"\u003e\n\n\u003c/p\u003e\n\n\n```javascript\n// Props object\nconst props = {\n    backgroundColor: \"#ff4a9d\", // pink\n    textColor: 'white'\n}\n```\n### Text Color\nThe `textColor` property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to `grey` if no value is defined.\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg height=\"50\" src=\"https://user-images.githubusercontent.com/60890281/119476424-a06e9f80-bd80-11eb-9f67-1926961613cf.png\" alt=\"Material Bread logo\"\u003e\n\n\u003c/p\u003e\n\n```javascript\n// Props object\nconst props = {\n    textColor: \"#d53eff\" // purple\n}\n```\n\n#### Shape\nThe `shape` property is used to change the border radius of the badge tags. The property currently only accepts two values `pill` and `box`.If no value is assigned the property value defaults to `box`.\n\n```javascript\nconst props = {\n    shape: 'box',\n}\n```\n\n### Border Color\nThe `borderColor` property is used to assign a single text color to all badge tags. The property accepts RGB colors, HEX colors as-well as css supported named colors. The property defaults to `transparent` if no value is defined.\n\n\u003cp align=\"center\"\u003e\n\n  \u003cimg height=\"50\" src=\"https://user-images.githubusercontent.com/60890281/119476419-9f3d7280-bd80-11eb-9f81-6b6829318faa.png\" alt=\"Material Bread logo\"\u003e\n\n\u003c/p\u003e\n\n```javascript\n// Props object\nconst props = {\n    borderColor: \"#00d9ba\" // teal\n}\n```\n\n### Click Callback\nThe `callback` property is used to assign a single callback function to all badge tags fired on the `click` event.\n\n```javascript\n// Callback function\nfunction hey(event){\n  console.log(`${target.event.innerHTML} 🔥`);\n};\n\n// Props object\nconst props = {\n    callback: hey\n}\n\n// Tags Instance\nconst tags = new BadgeTags(props);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmulaza%2Fbadge-tags.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmulaza%2Fbadge-tags.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmulaza%2Fbadge-tags.js/lists"}