fr

firefly-react

play with fireflies on canvas with mouse @react

Showing:

Popularity

Downloads/wk

11

GitHub Stars

9

Maintenance

Last Commit

3mos ago

Contributors

2

Package

Dependencies

0

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

screen-capture (20)

A React Component for showing interactive animation of fireflies on canvas . As seen on the main page of http://thomso.in

LIVE Playgorund

https://codesandbox.io/s/example-firefly-react-forked-9gsye?file=/src/App.js

USAGE :

npm i firefly-react

Import it into your React Project

import Firefly from "firefly-react";

You can add an Array of colors and the fireflies thus generated will get its color(can be hex-code or in rbga format) from this array in a random fashion :

const colors = ["Blue ", "Green", "Red", "Orange"];

On every window resize canvas height and width is needed to be updated.

const [canvasHeight, setCanvasHeight] = useState(window.innerHeight);
const [canvasWidth, setCanvasWidth] = useState(window.innerWidth);

window.addEventListener(
   "resize",
   (e) => {
   setCanvasHeight(window.innerHeight);
   setCanvasWidth(window.innerWidth);
   },
   false
);

The Firefly component is basically a HTMLCanvas element under the hood, you need to assign the height , width, and position accordingly. you can use Z-index and relative or absolute poisiton values of css to adjust its positon on z-axis, usually we tend to keep this element behind the CTA and above the background to have a better effect, but you can also give it Z-index:1000000 to ensure it appears right in front !

<>

      <Firefly
         canvasWidth={canvasWidth}
         canvasHeight={canvasHeight}
         colors={colors}
         className="firefly-react"
      />

   <div className="textBox">
      <div className="text">Firefly-react</div>
   </div>
</>

// Style
.firefly-react{
  position: absolute;
  top: 0;
  left: 0;
  z-index:1
}

Props :

PropsValuedefaultdescription
canvasWidth[0,SAFE-INT]HMTL CANVAS DEFAULTsets width of the canvas
canvasHeight[0-SAFE_INT]HMTL CANVAS DEFAULTsets the height of the canvas
colors[ ][ "#f15bb5","#f72585"]fireflies thus generated will be randomly alloted the colors from this array
classNamestring""add a className to the canvas element

Want to Contribute ?

Contributing to Open source is self rewarding and i love being part of it , if you too are excited about it , i would love to collaborate :3 . Currently we need help with :

  • Using multithreading concepts to boost our canvas rendering
  • particle pooling and hence performance optimization
  • I do believe this project has immense potential to offer some good out there , so any proposal for new feature addition would be highly appreciated .
  • Strong type checking and dynamic object validation would also make this library robust

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100