Applause useSound Confetti
Applause Button
Click the flowers 🎉 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
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…
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
Copy Code Button
You can see confetti and hear the applause by clicking the copy icon in any codeblock.