Version Updates
- [3.0.1] : Added optional
hangOnTopfeature, Added NextJS Example - [3.0.0] : Removed native elements, used
styled-components. Added optionalloopprop - [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
- Double-Click event pops the Balloons
- Single Click pops on touch enabled devices
- All Balloons pops with same colored burst animation
Twitter and this post
npm
npm install --save react-floating-balloons
| 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) |
- 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
Licensed under the MIT License, Copyright © 2021-present.
See LICENSE for more information.