fireworks-js

1
import { useRef } from 'react'
2
import { Fireworks } from '@fireworks-js/react'
3
import type { FireworksHandlers } from '@fireworks-js/react'
4

5
export function App() {
6
  const ref = useRef<FireworksHandlers>(null)
7

8
  const toggle = () => {
9
    if (!ref.current) return
10
    if (ref.current.isRunning) {
11
      ref.current.stop()
12
    } else {
13
      ref.current.start()
14
    }
15
  }
16

17
  return (
18
    <>
19
      <div
20
        style={{ display: 'flex', gap: '4px', position: 'absolute', zIndex: 1 }}
21
      >
22
        <button onClick={() => toggle()}>Toggle</button>
23
        <button onClick={() => ref.current!.clear()}>Clear</button>
24
      </div>
25
      <Fireworks
26
        ref={ref}
27
        options={{ opacity: 0.5 }}
28
        style={{
29
          top: 0,
30
          left: 0,
31
          width: '100%',
32
          height: '100%',
33
          position: 'fixed',
34
          background: '#000'
35
        }}
36
      />
37
    </>
38
  )
39
}
40