{"id":18396276,"url":"https://github.com/realdennis/emoji-claps","last_synced_at":"2025-04-07T04:32:41.158Z","repository":{"id":57224725,"uuid":"228005475","full_name":"realdennis/emoji-claps","owner":"realdennis","description":"\u003cemoji-claps /\u003e An experience-addicted web component for claping / liking / disliking.","archived":false,"fork":false,"pushed_at":"2022-01-28T22:02:14.000Z","size":302,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T13:05:25.419Z","etag":null,"topics":["custom-elements","lit-element","lit-html","shadowdom","typescript","web-animation","web-component","web-components"],"latest_commit_sha":null,"homepage":"","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/realdennis.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}},"created_at":"2019-12-14T10:37:44.000Z","updated_at":"2023-08-29T05:04:09.000Z","dependencies_parsed_at":"2022-09-06T13:40:19.518Z","dependency_job_id":null,"html_url":"https://github.com/realdennis/emoji-claps","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realdennis%2Femoji-claps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realdennis%2Femoji-claps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realdennis%2Femoji-claps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/realdennis%2Femoji-claps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/realdennis","download_url":"https://codeload.github.com/realdennis/emoji-claps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247595068,"owners_count":20963939,"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":["custom-elements","lit-element","lit-html","shadowdom","typescript","web-animation","web-component","web-components"],"created_at":"2024-11-06T02:13:17.701Z","updated_at":"2025-04-07T04:32:40.818Z","avatar_url":"https://github.com/realdennis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eEmoji-Claps\u003c/h1\u003e\n  \u003cimg src=\"https://media.giphy.com/media/L0ZowtBQQPiDmqw91H/giphy.gif\" alt=\"like\"\u003e\n  \u003cp\u003e An experience-addicted element for claping👏 / liking👍 / disliking👎 .\u003c/p\u003e\n  \u003cimg src=\"https://media.giphy.com/media/SRwJziI9B7RzqGDdtv/giphy.gif\" alt=\"dislike\"\u003e\n\u003c/div\u003e\n\n## What's new?\n\nYes, you can `click` and `hold` to increase the number.\nTry it on [Codepen](https://codepen.io/realdennis/pen/RwNGLEE)!\n\n## Installation\n\n```sh\n$ yarn add emoji-claps // ES module\n```\nor in browser\n```html\n\u003cscript src=\"https://unpkg.com/emoji-claps/dist/emoji-claps.umd.js\"\u003e\u003c/script\u003e\n\u003c!-- It's umd bundle--\u003e\n```\n\n## Polyfill\n\nThe animation use `Element.animate` method and `effect.target`, it's fancy and imperative but not fully support for low version browser \u0026 Safari, so please run the [`web-animation next` polyfill](https://github.com/web-animations/web-animations-js) before initial.\n\n```html\n\u003cscript src=\"https://rawgit.com/web-animations/web-animations-js/master/web-animations-next-lite.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```html \n\u003cemoji-claps \n             emoji=\"👏\" \n             currentcount=\"30\" \n             maxcount=\"50\" \n             bullets='[\"😍\",\"🎉\",\"🔥\",\"😆\"]' \n             bulletcount=\"6\" \n             prefix=\"+\"\n             \u003e\u003c/emoji-claps\u003e\n```  \n\n## Event\n\n### full\nThe `full` event will trigger when `currentcount === maxcount`.\n\nTake an example\n```javascript\nconst emojiClaps = document.querySelector('emoji-claps');\nemojiClaps.addEventListener('full',e=\u003e{\n  // Do something if currentcount is 50 (maxcount)\n})\n```\n\n### click\nThe `click` event will trigger when user click `emoji-claps`.\n\nTake an example\n```javascript\nconst emojiClaps = document.querySelector('emoji-claps');\nemojiClaps.addEventListener('click',e=\u003e{\n  // Do something track after user click\n})\n```\n\n---\nLICENSE MIT © 2019 realdennis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealdennis%2Femoji-claps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frealdennis%2Femoji-claps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frealdennis%2Femoji-claps/lists"}