Skip to content

lindelof/react-mouse-particles

Repository files navigation

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} />
key describe type example
g Whether to add gravity number 1
num The number of particles emitted each time number 3
radius The radius of every particle number 10
alpha The alpha of every particle number .1
tha The Particle emitter angle number 20
v The Particle emitter Particle velocity number 0.5
life The life of every particle number 1.2
color Particle color array or string <MouseParticles g={1} color="random" /> // or <MouseParticles g={1} color={["#ff0000", "#ccdfs2"]} />
cull Eliminate dom's className without triggering animation string <MouseParticles cull="container,image-wrapper" />
level Detect levels of culling animation number 6

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