Applause useSound Confetti

Full Stack Developed by: Donald Boulton Followย Donย on Twitter๐Ÿ™Œ 0
|
โ€‚Oct 10, 2020โ€‚3 min readReact, Applause, useSound, Confettiโ€‚ Categoryโ€‚Techโ€‚...

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.

Install Modules

๐ŸคŸ 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.

Applause Code

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


Slack

Bring your team together with Slack, Work collaboration hub.

MailChimp Newsletters
MailChimp Newsletters

Enjoyed this post? Subscribe!
Css Tricks

Front-End UI, Javascript & Functions, HTML Tips, and More!