Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-floating-balloons

sanishkr2kMIT3.0.2

Floating colorful balloons with custom names and popping feature

react, balloons, floating, birthday, animation, colorful, pop, burst

readme

React Floating Balloons 🎈💥

Version Updates

  • [3.0.2] : Update balloon pop audio cdn
  • [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

Edit react-floating-balloons-basic-example

NextJS Example(^v3.0.0)

Edit nextjs-react-floating-balloons-example

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]

  • <input disabled="" type="checkbox"> Props validation
  • <input checked="" disabled="" type="checkbox"> Remove CSS import
  • <input disabled="" type="checkbox"> Fix SSR issues
  • <input disabled="" type="checkbox"> Allow Custom colors
  • <input disabled="" type="checkbox"> Allow custom size
  • <input disabled="" type="checkbox"> Allow style customisation for msgText
  • <input disabled="" type="checkbox"> Better burst animation
  • <input disabled="" type="checkbox"> Test cases
  • <input disabled="" type="checkbox"> Balloons string curved
  • <input disabled="" type="checkbox"> 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.