v1.3.0 (resolved: #33, #34, #22)

.github/markdown-autodocs/options.json

@@ -45,7 +45,7 @@
     },
     {
         "key": "<code>boundaries</code>",
-        "default values": "<code>{ x: 50, y: 50, width: container.clientWidth, height: container.clientHeight }</code>"
+        "default values": "<code>{ visible: false, x: 50, y: 50, width: container.clientWidth, height: container.clientHeight }</code>"
     },
     {
         "key": "<code>sound</code>",

examples/react.tsx

@@ -1,37 +1,95 @@
-import React, { useState, CSSProperties } from 'react'
-import { Fireworks } from '../src/react'
-import { FireworksOptions } from '../src/fireworks'
+import { CSSProperties } from 'react'
+import { Fireworks, useFireworks } from 'fireworks-js/dist/react'
 
-export const App: React.FC = () => {
-  const [isEnable, setEnable] = useState(true)
-
-  const options: FireworksOptions = {
-    speed: 3,
-    mouse: {
-      max: 3,
-      move: false,
-      click: true
+export default function App() {
+  const {
+    setEnabled,
+    setOptions,
+    enabled,
+    options,
+  } = useFireworks({
+    initialStart: true,
+    initialOptions: {
+      hue: {
+        min: 0,
+        max: 345
+      },
+      delay: {
+        min: 15,
+        max: 15
+      },
+      rocketsPoint: 50,
+      speed: 10,
+      acceleration: 1.2,
+      friction: 0.96,
+      gravity: 1,
+      particles: 90,
+      trace: 3,
+      explosion: 6,
+      autoresize: true,
+      brightness: {
+        min: 50,
+        max: 80,
+        decay: {
+          min: 0.015,
+          max: 0.03
+        }
+      },
+      boundaries: {
+        visible: true
+      },
+      sound: {
+        enable: false,
+        files: [
+          'https://fireworks.js.org/sounds/explosion0.mp3',
+          'https://fireworks.js.org/sounds/explosion1.mp3',
+          'https://fireworks.js.org/sounds/explosion2.mp3'
+        ],
+        volume: {
+          min: 1,
+          max: 2
+        }
+      },
+      mouse: {
+        click: true,
+        move: false,
+        max: 3
+      }
     }
-  }
+  })
 
   const style: CSSProperties = {
-    left: 0,
     top: 0,
+    left: 0,
     width: '100%',
     height: '100%',
     position: 'fixed',
     background: '#000'
   }
 
+  const toggleSound = () => {
+    setOptions({ sound: { enable: !options.sound!.enable } })
+  }
+
   return (
-    <div>
-      <button
-        onClick={() => setEnable(!isEnable)}
-        style={{ position: 'absolute', zIndex: 9999 }}
-      >
-        {isEnable ? 'Stop' : 'Start'}
-      </button>
-      {isEnable && <Fireworks options={options} style={style} />}
-    </div>
+    <Fireworks
+      style={style}
+      enabled={enabled}
+      options={options}
+    >
+      <div style={{
+        gap: '6px',
+        padding: '6px',
+        display: 'flex',
+        background: '#607d8b'
+      }}>
+        <button onClick={() => setEnabled()}>
+          Fireworks {enabled ? 'enabled' : 'disabled'}
+        </button>
+        <button onClick={() => toggleSound()}>
+          Sound {options.sound!.enable ? 'enabled' : 'disabled'}
+        </button>
+      </div>
+    </Fireworks>
   )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireworks-js",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "A simple fireworks library!",
   "module": "./dist/fireworks.js",
   "types": "./dist/fireworks.d.ts",

public/react.html

@@ -15,21 +15,19 @@
   <script type="module">
     import { Fireworks } from './react.js'
 
-    const App = React.createElement(Fireworks, {
-      style: {
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%',
-        position: 'fixed',
-        background: '#000'
-      },
-      options: {
-        speed: 5
-      }
-    })
+    const style = {
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      position: 'fixed',
+      background: '#000'
+    }
 
-    ReactDOM.render(App, document.getElementById('root'))
+    ReactDOM.render(
+      React.createElement(Fireworks, { style, enabled: true }),
+      document.getElementById('root')
+    )
   </script>
 </body>