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 }})

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

// 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 }
)