Features

• 🔥 Zero dependencies
• ⚙️ Flexible configuration
• 📦 Lightweight (~3.0kB gizpped)
• ☁️ Server-side rendering compatibility
• 📜 Supports TypeScript type definition

Demo

You can play with fireworks-js on fireworks.js.org or codesandbox.io

Installation

# with npm:
npm install fireworks-js

# or yarn:
yarn add fireworks-js

Usage

If you are using a module bundler like Webpack or Rollup, etc.., import fireworks-js into your project:

import { Fireworks } from 'fireworks-js'

const container = document.querySelector('.fireworks-container')
const fireworks = new Fireworks(container, { /* options */ })

fireworks.start()
fireworks.pause()
fireworks.clear()

// stop and clear fireworks
fireworks.stop()

// after initialization you can change the fireworks parameters
fireworks.setOptions({ delay: { min: 10, max: 15 }})

Using the CDN

<!-- jsdelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/fireworks-js@latest/dist/fireworks.js"></script>

Usage in React (with hook useFireworks)

import { Fireworks } from 'fireworks-js/dist/react'

export const App = () => {
  const options = {
    speed: 3
  }

  const style = {
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'fixed',
    background: '#000'
  }

  return <Fireworks options={options} style={style} />
}

Server-Side Rendering (with-no-ssr)

// components/Fireworks.tsx
import { Fireworks } from 'fireworks-js/dist/react'

export default () => <Fireworks />

// pages/index.tsx
import dynamic from 'next/dynamic'

const FireworksWithNoSSR = dynamic(
  () => import('../components/Fireworks'),
  { ssr: false }
)

Options

License

MIT License © 2021 Vitalij Ryndin