Applause useSound Confetti

Applause Api with useSound Hook and React Dom Confetti

2020-10-10

1 min read

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…

install

bash

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

src/components/applause.tsx

tsx

Copy Code Button

You can see confetti and hear the applause by clicking the copy icon in any codeblock.