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

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