GitHub - transitive-bullshit/react-particle-effect-button: Bursting particle eff...
source link: https://github.com/transitive-bullshit/react-particle-effect-button
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
readme.md
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 Descriptionhidden
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)
speed
number
func
random(4)
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK