Fireworks NPM | npm.io

Demo GIF of fireworks being rendered

import fx from 'fireworks'

fx({
  x: number // required
  y: number // required

  // optional
  count?: number
  colors?: string[]
  canvasWidth?: number
  canvasHeight?: number
  canvasTopOffset?: number
  canvasLeftOffset?: number
  bubbleSizeMinimum?: number
  bubbleSizeMaximum?: number
  bubbleSpeedMinimum?: number
  bubbleSpeedMaximum?: number
  particleTimeout?: number
  parentNode?: HTMLElement
})

Installation

Install with npm:

$ npm install fireworks --save

Or with yarn:

$ yarn add fireworks

Usage

Each time you call the fireworks() function, a canvas gets rendered with fireworks at position (x,y) like this:

const fireworks = require('fireworks')

fireworks({
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  colors: ['#cc3333', '#4CAF50', '#81C784']
})

If you want render multiple, you can loop through randomly:

import fx from 'fireworks'

let range = n => [...new Array(n)]

range(6).map(() =>
  fx({
    x: Math.random(window.innerWidth / 2) + window.innerWidth / 4,
    y: Math.random(window.innerWidth / 2) + window.innerWidth / 4,
    colors: ['#cc3333', '#4CAF50', '#81C784']
  })
)

For React apps, you can optionally use the component:

// You need to install React/React-DOM
import { Fireworks } from 'fireworks/lib/react'

function App() {
  let fxProps = {
    count: 3,
    interval: 200,
    colors: ['#cc3333', '#4CAF50', '#81C784'],
    calc: (props, i) => ({
      ...props,
      x: (i + 1) * (window.innerWidth / 3) - (i + 1) * 100,
      y: 200 + Math.random() * 100 - 50 + (i === 2 ? -80 : 0)
    })
  }

  return (
    <div>
      <Fireworks {...fxProps} />
      <h1>Congrats!</h1>
    </div>
  )
}