From 80dba80644963a4f050f2a235f7a67fdc11dc59f Mon Sep 17 00:00:00 2001
From: Sam Poder <sam.r.poder@gmail.com>
Date: Thu, 4 Apr 2024 11:35:47 -0700
Subject: [PATCH] one canvas only!

---
 pages/bin.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/pages/bin.js b/pages/bin.js
index f0295176..2dc22798 100644
--- a/pages/bin.js
+++ b/pages/bin.js
@@ -13,7 +13,7 @@ import {
 import Head from 'next/head'
 import Meta from '@hackclub/meta'
 import Nav from '../components/nav'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import Footer from '../components/footer'
 import { keyframes } from '@emotion/react'
 import RsvpForm from '../components/bin/rsvp-form'
@@ -22,13 +22,6 @@ import ForceTheme from '../components/force-theme'
 import JSConfetti from 'js-confetti'
 import Sparkles from '../components/sparkles'
 
-function fireConfetti() {
-  const jsConfetti = new JSConfetti()
-  jsConfetti.addConfetti({
-    emojis: ['🔌', '⚡️', '💥', '🚨', '🔋', '🤖', '🛞', '🔊', '🎙️', '💿', '🖲️', '⚙️', '🛠️'],
-  })
-}
-
 const RsvpCount = () => {
   const [rsvpCount, setRsvpCount] = useState(0)
   useEffect(async () => {
@@ -150,6 +143,15 @@ function spinIt(el) {
 }
 
 export default function Bin() {
+  const confettiInstance = useRef(null);
+  function fireConfetti() {
+    if(!confettiInstance.current){
+      confettiInstance.current = new JSConfetti()
+    }
+    confettiInstance.current.addConfetti({
+      emojis: ['🔌', '⚡️', '💥', '🚨', '🔋', '🤖', '🛞', '🔊', '🎙️', '💿', '🖲️', '⚙️', '🛠️'],
+    })
+  }
   return (
     <>
       <Meta as={Head}