Skip to content

Commit

Permalink
fix: Destroy confetti instance on unmount
Browse files Browse the repository at this point in the history
fix #47
  • Loading branch information
alampros committed Apr 2, 2019
1 parent 1ce7baf commit 6965e37
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/ReactConfetti.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
31 changes: 31 additions & 0 deletions stories/mount-test.stories.jsx
Original file line number Diff line number Diff line change
@@ -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>
))

0 comments on commit 6965e37

Please sign in to comment.