@9am/fire-flame-react

---

Demo

https://user-images.githubusercontent.com/1435457/181478598-803a9822-247f-44e2-8643-3de775900153.mov

Packages

| Package | Status | Description | Installation | Live Demo |
| ------- | ------ | ----------- | ------------ | --------- |
| @9am/fire-flame |  | Vanilla JS | npm install @9am/fire-flame |  |
| @9am/fire-flame-element |  | Web Component | npm install @9am/fire-flame-element |  |
| @9am/fire-flame-react |  | React Component | npm install @9am/fire-flame-react |  |

Usage

#### @9am/fire-flame
``js
import { FireFlame } from '@9am/fire-flame';

const ff = new FireFlame(document.querySelector('#container'), { / option / });
`

#### @9am/fire-flame-element
`js
import '@9am/fire-flame-element';

// HTML

`

#### @9am/fire-flame-react
`js
import { FireFlame } from '@9am/fire-flame-react';

// JSX
option /}>
`

Documentation

$3

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
|painter|'canvas' \| 'svg'|'canvas'|the renderer for fire flame|
|w|number|400|width|
|h|number|400|height|
|x|number|0|position x|
|y|number|0|position y|
|mousemove|boolean|true|enable mousemove|
|fps|number|60|render fps|
|wind|Vector|new Vector({ x: 0, y: -0.8 })|the Vector force applied to particles|
|friction|number|0.98|the friction applied to particles|
|particleNum|number|15|the number of particle to draw the flame|
|particleDistance|number|10|the distance between particles|
|particleFPS|number|10|particle spawn fps|
|sizeCurveFn|function|

() => x > 0.7 
   ? Math.sqrt(1 - x)  50
   : Math.pow(x - 1, 2)  -30 + 30

|define the size of the flame|
|innerColor|string|'blue'|flame color inner|
|outerColor|string|'blueviolet'|flame color outer|

$3

#### .start()
Start fire flame.

#### .stop()
Stop fire flame.

#### .setOption(option)
Update fire flame options.

#### .destroy()`
Destroy fire flame.

License

MIT