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

A React Hook for Sound Effects

๐Ÿš€ Repo ๐Ÿ”— useSound by Josh W Comeau

The web needs more (tasteful) sounds!

  • ๐Ÿ‘‚ Lets your website communicate using 2 human senses instead of 1
  • ๐Ÿ”ฅ Declarative Hooks API
  • โšก๏ธ <1kb bytes (gzip) in your bundle! ~10kb loaded async.
  • โœจ Built with Typescript
  • ๐Ÿ—ฃ Uses a powerful, battle-tested audio utility: Howler.js

Minified file size License: MIT NPM version Code of Conduct

This library only works with React DOM, but @remigallego created an alternative for React Native! Check out react-native-use-sound.

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


Sooner Girls

National Champions For the Fifth Time, Go Sooners!

Css Tricks

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

Fox News

The Truth In the Latest World and National News.