The Story of Twitter-like “React Floating Balloons” — 🎈💥
Published: 2022-03-08 12:09:05

---
title: The Story of Twitter-like “React Floating Balloons” — 🎈💥
published: true
description: Create custom floating balloons in ReactJS/NextJS. Supports balloon pop animation and sound. Custom count, msg, loop, multiple colors, and more.
cover_image: https://miro.medium.com/proxy/0*ZtL3nhmhCF_Yfp_M.jpg
---
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.

![Img Credit: [https://metro.co.uk/2015/08/04/tell-twitter-your-date-of-birth-and-it-will-shower-you-with-digital-balloons-5326986/](https://metro.co.uk/2015/08/04/tell-twitter-your-date-of-birth-and-it-will-shower-you-with-digital-balloons-5326986/)](https://cdn-images-1.medium.com/max/3174/0*RAiQDQW0Kzk_WslC.png)

*TL;DR*
>  ***npm i [react-floating-balloons](https://www.npmjs.com/package/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](https://erdoganbavas.medium.com/creating-birthday-balloons-like-twitter-profile-no-image-5348a1dc2720), 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.

![Img Credit: [https://www.shutterstock.com/image-vector/concept-escape-dream-freedom-man-leaving-1991789786](https://www.shutterstock.com/image-vector/concept-escape-dream-freedom-man-leaving-1991789786)](https://cdn-images-1.medium.com/max/2000/0*Zhsjn5LJwl_DvTgn.jpg)

After stitching some code and tailoring some features, I made a working example in ReactJS. The library used for pop animation is [here](https://www.npmjs.com/package/@mojs/core). 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](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](https://bundlephobia.com/package/react-floating-balloons@3.0.0) at the time of writing this article.

So, here is the library 🎈:

## npm i [react-floating-balloons](https://www.npmjs.com/package/react-floating-balloons)

And, here is a basic example:
{% embed https://codesandbox.io/embed/react-floating-balloons-basic-example-4cx9kh?fontsize=14&hidenavigation=1 %}

Please feel free to raise any issues [here](https://github.com/sanishkr/react-floating-balloons/issues/new)

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