transitive-bullshit / react-particle-effect-button

Bursting particle effect buttons for React 🎉

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)
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

Support my OSS work by following me on twitter

react-particle-effect-button's Issues

cannot read property 'match' of undefined

I get this error when I install the package using npm install --save react-particle-effect-button

npm ERR! Cannot read property 'match' of undefined

Here is the complete debug log:

0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli '/home/praveen/.nvm/versions/node/v12.5.0/bin/node', 1 verbose cli '/home/praveen/.nvm/versions/node/v12.5.0/bin/npm', 1 verbose cli 'install', 1 verbose cli '--save', 1 verbose cli 'react-particle-effect-button' 1 verbose cli ] 2 info using [email protected] 3 info using [email protected] 4 verbose npm-session 4149384ab7b567a8 5 silly install loadCurrentTree 6 silly install readLocalPackageData 7 http fetch GET 304 https://registry.npmjs.org/react-particle-effect-button 1203ms (from cache) 8 silly pacote tag manifest for react-particle-effect-button@latest fetched in 1442ms 9 timing stage:loadCurrentTree Completed in 14120ms 10 silly install loadIdealTree 11 silly install cloneCurrentTreeToIdealTree 12 timing stage:loadIdealTree:cloneCurrentTree Completed in 14ms 13 silly install loadShrinkwrap 14 timing stage:rollbackFailedOptional Completed in 1ms 15 timing stage:runTopLevelLifecycles Completed in 14389ms 16 silly saveTree [email protected]
17 verbose stack TypeError: Cannot read property 'match' of undefined
17 verbose stack at tarballToVersion (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:87:20) 17 verbose stack at inflatableChild (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:99:22) 17 verbose stack at /home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/lib/install/inflate-shrinkwrap.js:55:12 17 verbose stack at tryCatcher (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23) 17 verbose stack at Object.gotValue (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/reduce.js:155:18) 17 verbose stack at Object.gotAccum (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/reduce.js:144:25) 17 verbose stack at Object.tryCatcher (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23) 17 verbose stack at Promise._settlePromiseFromHandler (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:512:31) 17 verbose stack at Promise._settlePromise (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:569:18) 17 verbose stack at Promise._settlePromiseCtx (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:606:10) 17 verbose stack at _drainQueueStep (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:142:12) 17 verbose stack at _drainQueue (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:131:9) 17 verbose stack at Async._drainQueues (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:147:5) 17 verbose stack at Immediate.Async.drainQueues [as _onImmediate] (/home/praveen/.nvm/versions/node/v12.5.0/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14) 17 verbose stack at processImmediate (internal/timers.js:439:21) 18 verbose cwd /home/praveen/tasks-and-projects/react-native/OrientationSite-frontend/orientation-web 19 verbose Linux 4.15.0-52-generic 20 verbose argv "/home/praveen/.nvm/versions/node/v12.5.0/bin/node" "/home/praveen/.nvm/versions/node/v12.5.0/bin/npm" "install" "--save" "react-particle-effect-button" 21 verbose node v12.5.0 22 verbose npm v6.9.0 23 error Cannot read property 'match' of undefined 24 verbose exit [ 1, true ]

bug sometimes animation appears with choppy lines in it

Add License

Add License for the project.

Browser support chart

Having a supported browser chart would help with adoption

fix integrating animation timing seems to be off

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: ParticleEffectButton

I got this warning when using it

Issue getting package to work

I've set up a new environment with create-react-app and added this as a dependency. Using the following code in my App.js doesn't seem to do anything other than add the text "BUTTON CONTENT GOES HERE"

<ParticleEffectButton
         color='palegreen'
         hidden={this.state.hidden}
         style='fill'
         children={'hey'}
       >
         <button>HEY</button>
       </ParticleEffectButton>

Am I missing something? I have it imported and React is up to date.

Consider using display:"none" rather than visibility:"hidden" on canvas

As mentioned, I think you should consider using display:"none" rather than visibility:"hidden" on canvas. Using visibility could cause some responsive issue as the canva's width is 3 times larger than the button's width.
In your example, open it on mobile mode, it will cause responsive issue.
https://transitive-bullshit.github.io/react-particle-effect-button/

Button appears briefly after animation

Is anyone else experiencing this where- after the button disintegrates- it flashes briefly just before the 'visibility: hidden' style is applied to the wrapper. Kinda ruins the effect...

My code is as follows:

class ItzAButton extends Component {
    constructor(props) {
        super(props)

        this.state = {
            hidden: false
        }
    }

    render() {
        return (
            <ParticleEffectButton
                color='red'
                hidden={this.state.hidden}
                // duration={2000}
                // type={['circle','rectangle','triangle'][Math.floor(Math.random()*3)]}
            >
                <button
                    className="button button3"
                    onClick={() => this.setState({hidden: true})}
                >Click Me!</button>
            </ParticleEffectButton>
        )
    }
}

Nothin' fancy.