featured image

Applause useSound Confetti

Applause Api with useSound Hook and React Dom Confetti

2020-10-101 min read
Profile picture
πŸ‘‹
Developed and Written by: Donald BoultonπŸŽ‰ 0
|

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.