Home

Awesome

react-mouse-particles

NPM JavaScript Style Guide

A mouse particle effect react component

A very fun react library that can be used to create mouse particle effects, which are as cool as meteors or fireballs. I often want to use react to do something fun. Using this component may make your page instantly glorious.

Another react particle background animation library is here https://github.com/lindelof/particles-bg

Online demo

Install

npm install --save react-mouse-particles

Usage

import React, { Component } from 'react'

import MouseParticles from 'react-mouse-particles'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <MouseParticles g={1} color="random" cull="col,image-wrapper"/>
      </>
    )
  }
}

Parameter Description

<MouseParticles g={1} num={6} color="random" cull="stats,image-wrapper" level={6} />
keydescribetypeexample
gWhether to add gravitynumber1
numThe number of particles emitted each timenumber3
radiusThe radius of every particlenumber10
alphaThe alpha of every particlenumber.1
thaThe Particle emitter anglenumber20
vThe Particle emitter Particle velocitynumber0.5
lifeThe life of every particlenumber1.2
colorParticle colorarray or string<MouseParticles g={1} color="random" /> // or <MouseParticles g={1} color={["#ff0000", "#ccdfs2"]} />
cullEliminate dom's className without triggering animationstring<MouseParticles cull="container,image-wrapper" />
levelDetect levels of culling animationnumber6

Contribution

I very much hope that you can work with me to modify the code. I also have a lot of fun ideas. Maybe you can join me to implement it.

License

https://opensource.org/licenses/MIT