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 , 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. post After stitching some code and tailoring some features, I made a working example in ReactJS. The library used for pop animation is . I was not quite happy with the code. There were two problems: here 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: issue, which can be easily solved by dynamic imports with flag and displaying the balloon component only after CSR. ReferenceError: self is not defined { ssr: false } . NextJS doesn’t seem to have support for this yet. The only possible working solution was to use module with next.config.js which can be a lot of work for some devs. [Global CSS cannot be imported from within node_modules](https://github.com/vercel/next.js/issues/19936) next-global-css 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 , in only a few minutes each. loop hangOnTop And, the “no concurrent balloon popping audio” issue was fixed too. 😊 The complete code size apart from dependencies is only at the time of writing this article. ~3KB So, here is the library 🎈: npm i react-floating-balloons And, here is a basic example: React Floating Balloons — CodeSandBo 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, 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

Chain

Twitter

React Progressive with Lazy-Loading Images [A How-To Guide]

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - React

Too Long; Didn't Read

Make resilience your competitive advantage

How to Make the Floating Balloons 🎈Effect in ReactJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

React Progressive with Lazy-Loading Images [A How-To Guide]

Coder’s Way Of Wishing Happy Birthday

"Do You Think You Know What it Takes to Tell The User It's Their Birthday?"

Today Is My 33rd Birthday: Suprise, It's Life!

The Noonification: The Easiest Way to Create Your First NPM Package (12/15/2023)

React Progressive with Lazy-Loading Images [A How-To Guide]

Coder’s Way Of Wishing Happy Birthday

"Do You Think You Know What it Takes to Tell The User It's Their Birthday?"

Today Is My 33rd Birthday: Suprise, It's Life!

The Noonification: The Easiest Way to Create Your First NPM Package (12/15/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps