Merge pull request #50 from alampros/develop

Cleanup on mount and update deps

package.json

@@ -92,7 +92,7 @@
     "react": "^16.2.0",
     "react-docgen-typescript-loader": "^3.0.1",
     "react-dom": "^16.2.0",
-    "react-use": "^5.5.6",
+    "react-use": "^7.3.1",
     "semantic-release": "^15.1.7",
     "typescript": "^3.3.3333",
     "webpack": "^4.29.6",

src/ReactConfetti.tsx

@@ -23,6 +23,9 @@ export class ReactConfetti extends Component<Props> {
       this.confetti.options = confettiOptions as IConfettiOptions
     }
   }
+  componentWillUnmount() {
+    this.confetti = undefined
+  }
 
   render() {
     const [ confettiOptions, passedProps ] = extractCanvasProps(this.props)

stories/SizedConfetti.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import useWindowSize from 'react-use/lib/useWindowSize'
+
+import ReactConfetti from '../src/ReactConfetti'
+
+export default (passedProps) => {
+  const { width, height } = useWindowSize()
+  return (
+    <ReactConfetti
+      width={width}
+      height={height}
+      {...passedProps}
+    />
+  )
+}

stories/index.stories.jsx

@@ -1,26 +1,16 @@
 import React from 'react'
-import { useWindowSize } from 'react-use'
+import useWindowSize from 'react-use/lib/useWindowSize'
+import SizedConfetti from './SizedConfetti'
 import { withKnobs, boolean, number } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import { withInfo } from '@storybook/addon-info'
 
 import ReactConfetti from '../src/ReactConfetti'
 
-const SizedConfetti = (passedProps) => {
-  const { width, height } = useWindowSize()
-  return (
-    <ReactConfetti
-      width={width}
-      height={height}
-      {...passedProps}
-    />
-  )
-}
-
 const PointConfetti = (passedProps) => {
   const { width, height } = useWindowSize()
   return (
-    <ReactConfetti
+    <SizedConfetti
       width={width}
       height={height}
       confettiSource={{

stories/mount-test.stories.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { storiesOf } from '@storybook/react'
+
+import ReactConfetti from '../src/ReactConfetti'
+
+const Toggler = ({ children }) => {
+  const [isVisible, setVisible] = useState(true)
+  const handleClick = () => {
+    setVisible(!isVisible)
+  }
+  return (
+    <div>
+      {isVisible && children}
+      <div style={{ position: 'absolute', top: 10, left: 10 }}>
+        <button onClick={handleClick}>
+          Toggle
+        </button>
+        <aside style={{ marginTop: '2rem' }}>
+          This is just to test that the confetti is cleaned up properly when the component is unmounted.
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+storiesOf('Tests', module)
+  .add('Cleanup on mount', () => (
+    <Toggler>
+      <ReactConfetti style={{ zIndex: 0 }} />
+    </Toggler>
+  ))

stories/snow.stories.jsx

@@ -1,20 +1,8 @@
 import React from 'react'
-import { useWindowSize } from 'react-use'
 import { storiesOf } from '@storybook/react'
 import { randomInt } from '../src/utils'
 
-import ReactConfetti from '../src/ReactConfetti'
-
-const SizedConfetti = (passedProps) => {
-  const { width, height } = useWindowSize()
-  return (
-    <ReactConfetti
-      width={width}
-      height={height}
-      {...passedProps}
-    />
-  )
-}
+import SizedConfetti from './SizedConfetti'
 
 function drawSnowflake(ctx) {
   const numPoints = this.numPoints || (randomInt(3, 4) * 2)

stories/stars.stories.jsx

@@ -1,20 +1,7 @@
 import React from 'react'
-import { useWindowSize } from 'react-use'
 import { storiesOf } from '@storybook/react'
 import { randomInt } from '../src/utils'
-
-import ReactConfetti from '../src/ReactConfetti'
-
-const SizedConfetti = (passedProps) => {
-  const { width, height } = useWindowSize()
-  return (
-    <ReactConfetti
-      width={width}
-      height={height}
-      {...passedProps}
-    />
-  )
-}
+import SizedConfetti from './SizedConfetti'
 
 function drawStar(ctx) {
   const numPoints = this.numPoints || randomInt(4, 6)