From 0339b886617fb67b5103da99ce3e67d824f3c26e Mon Sep 17 00:00:00 2001
From: Tim Goosens <tim.goosens@codedazur.com>
Date: Thu, 4 Apr 2024 11:45:17 +0200
Subject: [PATCH 1/2] Add the useHover hook

---
 .changeset/soft-sloths-clean.md             |  5 ++++
 packages/react-essentials/hooks/useHover.ts | 32 +++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 .changeset/soft-sloths-clean.md
 create mode 100644 packages/react-essentials/hooks/useHover.ts

diff --git a/.changeset/soft-sloths-clean.md b/.changeset/soft-sloths-clean.md
new file mode 100644
index 00000000..a139b991
--- /dev/null
+++ b/.changeset/soft-sloths-clean.md
@@ -0,0 +1,5 @@
+---
+"@codedazur/react-essentials": minor
+---
+
+Add the useHover hook
diff --git a/packages/react-essentials/hooks/useHover.ts b/packages/react-essentials/hooks/useHover.ts
new file mode 100644
index 00000000..93894d5c
--- /dev/null
+++ b/packages/react-essentials/hooks/useHover.ts
@@ -0,0 +1,32 @@
+import { RefObject, useEffect, useState } from "react";
+
+/**
+ * Determine if the element is hovered by the user.
+ *
+ * @param elementRef
+ * @returns boolean
+ */
+export function useHover<T extends HTMLElement = HTMLElement>(
+  elementRef: RefObject<T>,
+): boolean {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const mouseEnterHandler = () => setIsHovered(true);
+  const mouseLeaveHandler = () => setIsHovered(false);
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (element) {
+      element.addEventListener("mouseenter", mouseEnterHandler);
+      element.addEventListener("mouseleave", mouseLeaveHandler);
+
+      return () => {
+        element.removeEventListener("mouseenter", mouseEnterHandler);
+        element.removeEventListener("mouseleave", mouseLeaveHandler);
+      };
+    }
+  }, [elementRef]);
+
+  return isHovered;
+}

From c96b9000c2c9e98e8aa9ecdf4d009e395fc6579d Mon Sep 17 00:00:00 2001
From: Thijs Daniels <thijsdaniels@codedazur.com>
Date: Thu, 4 Apr 2024 17:32:36 +0200
Subject: [PATCH 2/2] feat: support MaybeRef on useHook

---
 .changeset/soft-sloths-clean.md             |  2 +-
 packages/react-essentials/hooks/useHover.ts | 28 ++++++++++-----------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/.changeset/soft-sloths-clean.md b/.changeset/soft-sloths-clean.md
index a139b991..a67cbaa1 100644
--- a/.changeset/soft-sloths-clean.md
+++ b/.changeset/soft-sloths-clean.md
@@ -2,4 +2,4 @@
 "@codedazur/react-essentials": minor
 ---
 
-Add the useHover hook
+The useHover hook was added.
diff --git a/packages/react-essentials/hooks/useHover.ts b/packages/react-essentials/hooks/useHover.ts
index 93894d5c..5c2bc766 100644
--- a/packages/react-essentials/hooks/useHover.ts
+++ b/packages/react-essentials/hooks/useHover.ts
@@ -1,32 +1,32 @@
-import { RefObject, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { MaybeRef } from "../types/MaybeRef";
+import { resolveMaybeRef } from "../utilities/resolveMaybeRef";
 
 /**
- * Determine if the element is hovered by the user.
- *
- * @param elementRef
- * @returns boolean
+ * This hook returns a boolean that indicates whether the cursor is hovering
+ * over a particular element.
  */
 export function useHover<T extends HTMLElement = HTMLElement>(
-  elementRef: RefObject<T>,
+  ref: MaybeRef<T>,
 ): boolean {
   const [isHovered, setIsHovered] = useState(false);
 
-  const mouseEnterHandler = () => setIsHovered(true);
-  const mouseLeaveHandler = () => setIsHovered(false);
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
 
   useEffect(() => {
-    const element = elementRef.current;
+    const element = resolveMaybeRef(ref);
 
     if (element) {
-      element.addEventListener("mouseenter", mouseEnterHandler);
-      element.addEventListener("mouseleave", mouseLeaveHandler);
+      element.addEventListener("mouseenter", handleMouseEnter);
+      element.addEventListener("mouseleave", handleMouseLeave);
 
       return () => {
-        element.removeEventListener("mouseenter", mouseEnterHandler);
-        element.removeEventListener("mouseleave", mouseLeaveHandler);
+        element.removeEventListener("mouseenter", handleMouseEnter);
+        element.removeEventListener("mouseleave", handleMouseLeave);
       };
     }
-  }, [elementRef]);
+  }, [ref]);
 
   return isHovered;
 }