react-particle-effect-button
v1.0.1
Published
Bursting particle effect buttons for React.
Downloads
639
Readme
react-particle-effect-button (demo)
Bursting particle effect buttons for React.
This library is a React port of an awesome Codrops Article by Luis Manuel (original source).
Install
npm install --save react-particle-effect-button
Usage
Check out the Demo to see it in action.
import React, { Component } from 'react'
import ParticleEffectButton from 'react-particle-effect-button'
class App extends Component {
state = {
hidden: false
}
render () {
return (
<ParticleEffectButton
color='#121019'
hidden={this.state.hidden}
>
BUTTON CONTENT GOES HERE
</ParticleEffectButton>
)
}
}
Note that children
can be anything from a simple <button>
to a complex React subtree. The children
should represent the button's contents.
You change the hidden
boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If hidden
changes to true
, the button will perform a disintegrating animation. If hidden
changes to false
, it will reverse and reintegrate the original content.
Props
| Property | Type | Default | Description |
|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|
| hidden
| boolean | false | Whether button should be hidden or visible. Changing this prop starts an animation. |
| color
| string | '#000' | Particle color. Should match the button content's background color |
| children
| React Node | undefined | The contents of the button. |
| duration
| number | 1000 | Animation duration in milliseconds. |
| easing
| string | 'easeInOutCubic' | Animation easing. |
| type
| string | circle | 'circle' or 'rectangle' or 'triangle' |
| style
| string | fill | 'fill' or 'stroke' |
| direction
| string | 'left' | 'left' or 'right' or 'top' or 'bottom' |
| canvasPadding
| number | 150 | Amount of extra padding to add to the canvas since the animation will overflow the content's bounds |
| size
| number | func | random(4) | Particle size. May be a static number or a function which returns numbers. |
| speed
| number | func | random(4) | Particle speed. May be a static number or a function which returns numbers. |
| particlesAmountCoefficient
| number | 3 | Increases or decreases the relative number of particles |
| oscillationCoefficient
| number | 20 | Increases or decreases the relative curvature of particles |
| onBegin
| func | noop | Callback to be notified once an animation starts. |
| onComplete
| func | noop | Callback to be notified once an animation completes. |
I tried to keep the properties exactly the same as in the original codrops version.
Related
- anime.js - Underlying animation engine.
- ParticleEffectsButtons - Original source this library is based on.
- Codrops Article - Original article this library is based on.
This module was bootstrapped with create-react-library.
License
MIT © Travis Fischer