The Story of Twitter-like “React Floating Balloons” — 🎈💥

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, how about if you can also have a feature to pop them with burst audio 🎈💥. It would be so cool, isn’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:

1. Some core parts of the balloon element were still using vanilla HTML/JS/CSS.

2. 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 balloon pop feature on 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:

1. 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.

2. Global CSS cannot be imported from within node_modules. 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:

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, 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!! 🎈💥