sanishkr/react-floating-balloons

Custom Floating Balloons for ReactJS, with pop sound and animation

React Floating Balloons 🎈💥

Version Updates

• [3.0.1] : Added optional hangOnTop feature, Added NextJS Example
• [3.0.0] : Removed native elements, used styled-components. Added optional loop prop
• [2.1.1] : Add optional custom props count, msgText, colors, popVolumeLevel
• [2.0.2] : Add 2 new colors orange, purple
• [2.0.1] : Pop event on single click for touch screen devices
• [2.0.0] : Added Pop animation and Sound

Feature Bonus

• Double-Click event pops the Balloons
• Single Click pops on touch enabled devices
• All Balloons pops with same colored burst animation

Motivation

Twitter and this post

Installation

npm

npm install --save react-floating-balloons

Basic Example

NextJS Example(^v3.0.0)

Props

Name	Type	Required	Options	Default	Description
count	number	false		7	Number of balloons on the screen
msgText	string	false		Happy Birthday.	Msg written on random balloons(Keep it short)
colors	Array<String>	false	'yellow', 'green', 'blue', 'red', 'orange', 'purple'	['yellow', 'green', 'blue', 'red', 'orange', 'purple']	list for balloons to choose random colors from
popVolumeLevel	Float	false	0 to 1	0.5	Volume level for Balloon pop sound
loop	Boolean	false	true|false	true	Loop Balloon animation until popped
hangOnTop	Boolean	false	true|false	false	Hangs Balloons on top until popped(set loop to false)

[Todo]

• Props validation
• Remove CSS import
• Fix SSR issues
• Allow Custom colors
• Allow custom size
• Allow style customisation for msgText
• Better burst animation
• Test cases
• Balloons string curved
• Add more examples

Note for NextJS Usage: Use next-global-css npm module setup for (v2 and below) and use dynamic import feature with { ssr: false } to avoid errors

Maintenance Status

License

Licensed under the MIT License, Copyright © 2021-present.

See LICENSE for more information.