https://github.com/realdennis/emoji-claps
<emoji-claps /> An experience-addicted web component for claping / liking / disliking.
https://github.com/realdennis/emoji-claps
custom-elements lit-element lit-html shadowdom typescript web-animation web-component web-components
Last synced: about 1 year ago
JSON representation
<emoji-claps /> An experience-addicted web component for claping / liking / disliking.
- Host: GitHub
- URL: https://github.com/realdennis/emoji-claps
- Owner: realdennis
- License: mit
- Created: 2019-12-14T10:37:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-01-28T22:02:14.000Z (over 4 years ago)
- Last Synced: 2025-03-17T13:05:25.419Z (about 1 year ago)
- Topics: custom-elements, lit-element, lit-html, shadowdom, typescript, web-animation, web-component, web-components
- Language: TypeScript
- Homepage:
- Size: 295 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Emoji-Claps
An experience-addicted element for claping👏 / liking👍 / disliking👎 .
## What's new?
Yes, you can `click` and `hold` to increase the number.
Try it on [Codepen](https://codepen.io/realdennis/pen/RwNGLEE)!
## Installation
```sh
$ yarn add emoji-claps // ES module
```
or in browser
```html
```
## Polyfill
The animation use `Element.animate` method and `effect.target`, it's fancy and imperative but not fully support for low version browser & Safari, so please run the [`web-animation next` polyfill](https://github.com/web-animations/web-animations-js) before initial.
```html
```
## Usage
```html
```
## Event
### full
The `full` event will trigger when `currentcount === maxcount`.
Take an example
```javascript
const emojiClaps = document.querySelector('emoji-claps');
emojiClaps.addEventListener('full',e=>{
// Do something if currentcount is 50 (maxcount)
})
```
### click
The `click` event will trigger when user click `emoji-claps`.
Take an example
```javascript
const emojiClaps = document.querySelector('emoji-claps');
emojiClaps.addEventListener('click',e=>{
// Do something track after user click
})
```
---
LICENSE MIT © 2019 realdennis