react-single-balloon
Made with create-react-library
Install
npm install --save react-single-balloon
Features
- Supports any color in the balloon
- Control transparency of the balloon
- Custom height/width (size) of the balloon
- Single click pop (hanle the event in parent component and play the burst sound of your choice)
- Built with Typescript
Demo
Example
Usage
import React from 'react'
import { Balloon } from 'react-single-balloon'
const App = () => {
let audio = new Audio(
'https://soundbible.com/mp3/Balloon%20Popping-SoundBible.com-1247261379.mp3'
)
const handleOnPop = () => {
audio.play()
}
return (
<>
<Balloon onPop={handleOnPop} loop={true} color='#FFC0CB' size={60}>
One
</Balloon>
<Balloon
onPop={handleOnPop}
loop={true}
color='blue'
size={80}
opacity={0.7}
>
Two
</Balloon>
<Balloon onPop={handleOnPop} loop={true} color='#EA18B4' size={90}>
<div>Three</div>
</Balloon>
<Balloon onPop={handleOnPop} loop={true} size={120} opacity={0.4}>
Four
</Balloon>
<Balloon onPop={handleOnPop} loop={true} color='#18EA1E' size={140}>
Five
</Balloon>
</>
)
}
export default App
Props
Name | Type | Required | Options | Default | Description |
---|---|---|---|---|---|
size | number |
false |
10, 20, 35, 400 |
20 |
The height and width of the balloon. |
color | string |
false |
yellow , blue , #EA18B4
|
red |
Any valid color of the balloon. |
loop | boolean |
false |
true or false
|
true |
Should loop or hang on the top. |
opacity | number |
false |
0 ... 1 |
1 |
Transparency of the balloon. |
onPop | Function |
false |
Single click event on ballon | ||
children | React.ReactNode |
Any valid HTML code. e.g, You can pass the text to be shown inside the balloon. It will be centered. Make sure the text is smaller than the size of the balloon. |
License
MIT © amitvchaudhary