react-single-balloon
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

react-single-balloon

Made with create-react-library

NPM JavaScript Style Guide

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

Edit react-floating-balloons-basic-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

Package Sidebar

Install

npm i react-single-balloon

Weekly Downloads

4

Version

1.0.4

License

MIT

Unpacked Size

759 kB

Total Files

9

Last publish

Collaborators

  • amitvchaudhary