Applause useSound Confetti

Applause Button

Click the 🙌 for claps in the Bio Section above and see an hear the Magic. 🤟🎉

I wanted a Applause button with sound and Confetti of my own design and below is what I came up with. I will be adding a version for FaunaDB using my own API with Netlify functions.

Applause api

🖧 Utilizing the free api from 🔗 Applause Button to CRUD the data. If you use this API allot, you should donate for its server time or to 🔗 Open Collective.

useSound Hook

💫 Using a simple React Hook from 🔗 Josh Comeau post on useSound Hook

Confetti Cannon

💣 I am using 🔗 react-dom-confetti for the Confetti Cannon that is positioned over the Applause button as so the explosion will come from the button count on the API response.

Applause Live Code

🤟 You will have to add sound.mp3 and modules. I got my clapping.mp3 from 🔗 FreeSound.org

Your own clapping sound, And then install...

yarn add use-sound react-dom-confetti

If you are using the below code give a Applause or use any social link or github star or add a Comment in the FaunaDB Comments Form to display your comments on this page.

import React, { useState, useEffect } from 'react'
import useSound from 'use-sound'
import clapping from '../../../static/audio/clapping.mp3'
import Confetti from 'react-dom-confetti'
import axios from 'axios'

const confettiConfig = {
  angle: 90,
  spread: 360,
  startVelocity: 40,
  elementCount: 70,
  dragFriction: 0.12,
  duration: 3000,
  stagger: 3,
  width: "10px",
  height: "10px",
  perspective: "500px",
  colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"]
};

const Wrapper = props => <span style={{ position: 'relative' }} {...props} />

const ConfettiWrapper = props => (
  <span style={{ position: 'absolute', top: 0, right: 0 }} {...props} />
)
const API = 'https://api.applause-button.com'
const VERSION = '3.0.0'
const mainUrl = typeof window !== 'undefined' ? window.location.href : ''

const HEADERS = {
  'Content-Type': 'text/plain',
}

const getClaps = async (url) => {
  const query = url ? `?url=${url}` : ''
  // eslint-disable-next-line no-return-await
  return await axios.get(`${API}/get-claps${query}`, {
    headers: HEADERS,
  })
}

const updateClaps = async (url, claps = 1) => {
  console.log(claps)
  const query = url ? `?url=${url}` : ''
  // eslint-disable-next-line no-return-await
  return await axios.post(`${API}/update-claps${query}`,
    JSON.stringify(`${claps},${VERSION}`), {
      headers: HEADERS,
    })
}

const ApplauseButton = ({ url = mainUrl, props }) => {
  const [count, setCount] = useState(0)
  const [isClapped, setIsClapped] = useState(false)
  const [play] = useSound(clapping)
  const doApplause = () => {
    if (!isClapped) {
      console.log('do clapping')
      const callBackend = async () => {
        const result = await updateClaps(url, 1)
        setCount(result.data)
        setIsClapped(true)        
      }
      callBackend()
    }
  }

  useEffect(() => {
    const fetchData = async () => {
      const result = await getClaps(url)
      console.log(result)
      setCount(result.data)      
    }
    fetchData()
  }, [])

  return <Wrapper><span
    style={{
      cursor: 'pointer',
      padding: '1em',
    }} onClick={() => {
      doApplause();
      play();
    }}>
    {
      isClapped ? '🤟🎉' : '🙌'
    }
    {` ${count}`}
       </span>
          <ConfettiWrapper>
            <Confetti active={isClapped} config={confettiConfig} 
            {...props}
            />
          </ConfettiWrapper>
    </Wrapper>
}

export default ApplauseButton