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