diff --git a/src/ReactConfetti.tsx b/src/ReactConfetti.tsx
index 53fa03b..cde8c32 100644
--- a/src/ReactConfetti.tsx
+++ b/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)
diff --git a/stories/mount-test.stories.jsx b/stories/mount-test.stories.jsx
new file mode 100644
index 0000000..c6cda6f
--- /dev/null
+++ b/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>
+  ))