realdennis / emoji-claps

<emoji-claps /> An experience-addicted web component for claping / liking / disliking.

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!

Installation

$ yarn add emoji-claps // ES module

or in browser

<script src="https://unpkg.com/emoji-claps/dist/emoji-claps.umd.js"></script>
<!-- It's umd bundle-->

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 before initial.

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations-next-lite.min.js"></script>

Usage

<emoji-claps 
             emoji="👏" 
             currentcount="30" 
             maxcount="50" 
             bullets='["😍","🎉","🔥","😆"]' 
             bulletcount="6" 
             prefix="+"
             ></emoji-claps>

Event

full

The full event will trigger when currentcount === maxcount.

Take an example

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

const emojiClaps = document.querySelector('emoji-claps');
emojiClaps.addEventListener('click',e=>{
  // Do something track after user click
})

---

LICENSE MIT © 2019 realdennis