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.

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

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/

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 ]

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.