https://github.com/fouad/fireworks

Simple, zero-dependency library for rendering fireworks in JavaScript and React
https://github.com/fouad/fireworks

Last synced: 2 months ago
JSON representation

Simple, zero-dependency library for rendering fireworks in JavaScript and React

• Host: GitHub
• URL: https://github.com/fouad/fireworks
• Owner: fouad
• Created: 2019-06-24T21:11:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T19:41:58.000Z (almost 2 years ago)
• Last Synced: 2024-11-07T04:50:00.169Z (3 months ago)
• Language: TypeScript
• Homepage: https://npmjs.com/package/fireworks
• Size: 1.83 MB
• Stars: 51
• Watchers: 1
• Forks: 3
• Open Issues: 9
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
![Demo GIF of fireworks being rendered](./test/images/fireworks.gif)






  🎆 fireworks





  Simple, zero-dependency library for


  rendering fireworks in JavaScript and React








  

  






```typescript

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:

```javascript

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:

```javascript

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:

```javascript

// 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 (

    


      

      
Congrats!

    

  )

}

```


#### NodeConf Fireworks

Looking for Eran Hammer's fireworks from NodeConf? Check out https://github.com/hueniverse/fireworks