From 2db85ed2f3e3c5eb6f580044b99e57cb3ecf130d Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 31 Aug 2022 10:46:04 -0300
Subject: [PATCH] fix(docs-home): customized button confetti

---
 .../components/templates/custom-button/index.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/docs/src/components/templates/custom-button/index.tsx b/apps/docs/src/components/templates/custom-button/index.tsx
index 33d7ff71a..459a822ac 100644
--- a/apps/docs/src/components/templates/custom-button/index.tsx
+++ b/apps/docs/src/components/templates/custom-button/index.tsx
@@ -1,12 +1,18 @@
-import React from "react";
+import {useRef} from "react";
 import {Button} from "@nextui-org/react";
 import confetti from "canvas-confetti";
 
 const CustomButton = () => {
-  const handleConfetti = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    const {currentTarget} = event;
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleConfetti = () => {
     const {clientWidth, clientHeight} = document.documentElement;
-    const {y: targetY, x: targetX, width: targetWidth} = currentTarget.getBoundingClientRect();
+    const boundingBox = buttonRef.current?.getBoundingClientRect?.();
+
+    const targetY = boundingBox?.y ?? 0;
+    const targetX = boundingBox?.x ?? 0;
+    const targetWidth = boundingBox?.width ?? 0;
+
     const targetCenterX = targetX + targetWidth / 2;
 
     confetti({
@@ -22,6 +28,7 @@ const CustomButton = () => {
 
   return (
     <Button
+      ref={buttonRef}
       auto
       rounded
       css={{