paint-brush
How to Make the Floating Balloons 🎈Effect in ReactJSby@sanishkr
1,663 reads
1,663 reads

How to Make the Floating Balloons 🎈Effect in ReactJS

by Sanish kumarMarch 15th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

npm i react-floating-balloons Creates custom floating balloons in ReactJS/NextJS Custom count, msg, looping, hangOnTop, multiple colors, etc. Supports balloon pop animation and sound Uses React Portal and Styled-Components

Company Mentioned

Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - How to Make the Floating Balloons 🎈Effect in ReactJS
Sanish kumar HackerNoon profile picture



So, you want to float some balloons on a webpage, huh? 🤔 🎈 Maybe, it is a birthday celebration or some other occasion. Maybe, you want to celebrate on your own website or for your users. Now, what about if you can also have a feature to pop them with burst audio 🎈💥. It would be so cool, wouldn’t it? 😂


I get it. A similar chain of thoughts came to my mind on my previous birthday. And most probably, you have already seen something similar, if you’ve used Twitter on your birthday. That’s where I got my motivation too.



TL;DR

npm i react-floating-balloons


  • Creates custom floating balloons in ReactJS/NextJS
  • Custom count, msg, looping, hangOnTop, multiple colors, etc.
  • Supports balloon pop animation and sound
  • Uses React Portal and Styled-Components


Thanks to this elaborate post, I got off to a quick start. But it was implemented in vanilla HTML/CSS/JS. And it didn’t have a lot of customization options. On one side I thought of making a ReactJS npm library while on the other side, my mind wandered. The mind wanders when it wanders, right? 😂 I kept thinking about writing custom messages on the balloon and popping them.



After stitching some code and tailoring some features, I made a working example in ReactJS. The library used for pop animation is here. I was not quite happy with the code. There were two problems:


  • Some core parts of the balloon element were still using vanilla HTML/JS/CSS.
  • I had a very low level of control over the customization of balloons.


I also noticed a bug that the pop sound of balloons was restricted to only once in a certain time interval, even if you might have popped more balloons during the interval.


I quickly realized that any issue of CSS conflicts in UI will disappear if I used react portal here. While I was working to fix the above problems, I hit a major snag in popping the balloons in mobile browsers(touch-supported devices).


Okay, so I thought it would be cool to implement a balloon pop feature on the double click event. While it worked on my laptop, but when I tested the new version on mobile, nothing happened. I dug deeper into the reason and found out that all touch-supported devices don’t seem to support/work well with native desktop-browser-like double click events.


The solution: allow such devices to pop the balloons with a single click. And to recognize such devices, the easiest working solution was:


const supportsTouch = “ontouchstart” in window || navigator.msMaxTouchPoints;


I was releasing multiple patches and minor version updates/fixes to test and then I hit another major snag in SSR. It didn’t seem to work with NextJS. Two issues:


  • ReferenceError: self is not defined issue, which can be easily solved by dynamic imports with { ssr: false } flag and displaying the balloon component only after CSR.

  • [Global CSS cannot be imported from within node_modules](https://github.com/vercel/next.js/issues/19936). NextJS doesn’t seem to have support for this yet. The only possible working solution was to use next-global-css module with next.config.js which can be a lot of work for some devs.


I realized in a few hours that the best way to get rid of most of the above and previous problems is to use styled-components.


I started to re-write all the Balloon elements and animation from scratch. Once I was done implementing all the basic features of the balloon and popping, I started adding some new features as well. Now I had full control over all the balloon elements and their customization. It became all easy to add extra features. I was able to add 2 additional features like loop, hangOnTop in only a few minutes each.


And, the “no concurrent balloon popping audio” issue was fixed too. 😊 The complete code size apart from dependencies is only ~3KB at the time of writing this article.


So, here is the library 🎈:


npm i react-floating-balloons


And, here is a basic example:


React Floating Balloons —

CodeSandBo


Please feel free to raise any issues here

Learnings:

  • Iterate over very quickly in the beginning.

  • Making examples for the users while writing such libraries, provides more clarity to oneself.

  • Test on various kinds of devices, as it helps in finding bugs.

  • Make sure to have high levels of control over core elements and components for quick customization and lesser bugs.


This library is still in its very early stages and I have a lot of Todos like props validation, more customization options, examples, and test cases.


All feedbacks and GitHub ⭐️’s are appreciated. Thanks for reading.

Happy Balloons Popping!! 🎈💥


Also published here.