React-canvas-js NPM

react-canvas-js (demo)

:rocket: Awesome HTML Canvas animations in React!

Install

npm install --save react-canvas-js

Usage

import React, { Component } from 'react'
import Canvas from 'react-canvas-js'

const particleOptions = [
  {
    'maxParticles': 50,
    'colors': ['#2E1D62', '#513D91', '#487EEF', '#11A887', '#fc5c65', '#fed330'],
    'shapes': ['circle', 'square'],
    'size': 10,
    'minSpeed': 0.05,
    'maxSpeed': 0.20,
    'alpha': 0.70,
    'backgroundColor': '#1E1F29'
  }
]

class Example extends Component {
  render () {
    return (
      <Canvas options={particleOptions} />
    )
  }
}

Available Options

Option	Type	Required	Default	Description
precision	`Number`	No	2	The precision to use for all float values in the component.
backgroundColor	`String`	No	`'#f1f1f1'`	The background color for the canvas.
maxParticles	`Number`	No	50	Maximum number of particles to include in Animation.
color	`String`	No	One of `['red', 'green', 'yellow']`	The color for all Particles.
colors	`[String]`	No	`['red', 'green', 'yellow']`	The range of colors to randomly pick for each particle.
shape	`Object/String`	No	One of `['circle', 'square', 'rectangle']`	The Shape of the particle.
shape.type	`String` (One of `['image', 'rectangle', 'square', 'circle']`)	No	`null`	The shape type (supported shapes are `['image', 'rectangle', 'square', 'circle']`).
shape.src	`String`	No / Yes (`if type === 'image'`)	`null`	The image src, if type is set to image.
shape.size	`Number \|\| Object`	No	Inherits Parent `size` property.	The size of the particle.
shape.size.width	`Number`	No	Inherits Parent `size` property.	The width of the particle.
shape.size.height	`Number`	No	Inherits Parent `size` property.	The height of the particle.
shape.size.radius	`Number`	No	Inherits Parent `size` property.	The radius of the particle if shape is 'circle'.
shape.color	`String`	No	Inherits Parent `color` property.
shapes	`[Object/String]`	No	`['circle', 'square', 'rectangle']`	The range of shapes to randomly pick for each particle.
minSize	`Number`	No	10	The minimum size (range) for the particle sizes, to be picked at random (if `size` not defined).
maxSize	`Number`	No	10	The maximum size (range) for the particle sizes, to be picked at random (if `size` not defined).
minSpeed	`Number`	No	0.05	The speed for each particle is taken at random in between the min(Speed) / max(Speed) range
maxSpeed	`Number`	No	0.09	The speed for each particle is taken at random in between the `min(Speed)` / `max(Speed)` range
alpha	`Number`	No	0.5	The alpha/transparency for the canvas particles/elements.
debugOptions	`Object`	No	`null`	Developer Debugging options
debugOptions.enabled	`boolean`	Yes	`false`	Enables debugging, and binds a Particle object to `window.Particle` to inspect.
debugOptions.attachAllParticles	`boolean`	No	`false`	Binds all the Particle objects to `window.Particles`.
debugOptions.showFrameRate	`boolean`	No	Shows a frame rate blurb over the canvas, indicating the frame rate achieved by that canvas.

Planned Features (checklist)

Add interaction support.
- Add support for custom hover handler (#1).
- Add support for custom click handler (#2).
- Add support for custom Keyboard key(s) handler (#3).
Add tests (#4).
Identify possible Optimizations (#5).
Particle/subject animation control, i.e. Support for controlling movement, scale and transform of Particle/subject from current given x,y coordinates to xn, yn coordinates over given duration or speed (#6).

My goal is to progress to more than just Particle animation, by simplifying and adding support for all canvas animation use cases. Suggestions and feedback are welcome too.

Contributing

I could use some assistance in building and improving this component. I'll welcome pull requests for bug fixes, new features, improvements and writing test cases. If you are interested head on over to the Issues section, and pick up any of the issue(s) that interest you. The issues with label need help could really do with some help (as the label suggests). Please create your pull requests to the develop branch. Top Contributors will be added here under the contributors section (if you'd like that).

Author

Shalom Sam

Checkout my Full Stack Web Developer Website
You can checkout this React Portfolio here
A scope of my work @ React Portfolio

License

@everything-registry/sub-chunk-2544 @zalastax/nolb-react-ca

1.0.1

5 years ago

1.0.0

6 years ago