3.0.1 • Published 2 years ago
react-floating-balloons v3.0.1
React Floating Balloons 🎈💥
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
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-balloonsBasic 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.