Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
example		example
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
LICENSE		LICENSE
package.json		package.json
readme.md		readme.md
rollup.config.js		rollup.config.js
yarn.lock		yarn.lock

Repository files navigation

react-particle-effect-button (demo)

Bursting particle effect buttons for React.

This library is a React port of an awesomeCodrops Article byLuis Manuel (originalsource).

Install

npm install --save react-particle-effect-button

Usage

Check out theDemo to see it in action.

importReact,{Component}from'react'importParticleEffectButtonfrom'react-particle-effect-button'classAppextendsComponent{state={hidden:false}render(){return(<ParticleEffectButtoncolor='#121019'hidden={this.state.hidden}>        BUTTON CONTENT GOES HERE</ParticleEffectButton>)}}

Note thatchildren can be anything from a simple<button> to a complex React subtree. Thechildren should represent the button's contents.

You change thehidden boolean prop to kick-off an animation, typically as a result of a click on the button's contents. Ifhidden changes totrue, the button will perform a disintegrating animation. Ifhidden changes tofalse, 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)
`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.