10

How to Make the Floating Balloons 🎈Effect in ReactJS

 2 years ago
source link: https://hackernoon.com/how-to-make-the-floating-balloons-effect-in-reactjs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How to Make the Floating Balloons 🎈Effect in ReactJS

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

Audio Presented by

Speed:
Read by:
Your browser does not support theaudio element.
Sanish kumar

Something by day, something else by night...

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.

cdKDtiFbXAdKDehLAz7YsIaD9j62-j7a3n37.png

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.

cdKDtiFbXAdKDehLAz7YsIaD9j62-f1b3n6t.jpeg

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 — Basic Example 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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK