feat: react hooks use hover mounted

Author: wkylin

src/components/hooks/useFocus/index.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+export default function useFocus<U extends HTMLElement>() {
+  const [isFocusing, setIsFocusing] = useState(false)
+  const ref = useRef<U>(null)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const handleFocus = () => {
+      setIsFocusing(true)
+    }
+    const handleBlur = () => {
+      setIsFocusing(false)
+    }
+
+    element.addEventListener('focus', handleFocus)
+    element.addEventListener('blur', handleBlur)
+
+    return () => {
+      if (element) {
+        element.removeEventListener('focus', handleFocus)
+        element.removeEventListener('blur', handleBlur)
+      }
+    }
+  }, [ref])
+
+  return { isFocusing, ref }
+}
+
+//   const { ref: focusRef, isFocusing } = useFocus<HTMLInputElement>();

src/components/hooks/useHover/index.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+export default function useHover<U extends HTMLElement>() {
+  const [isHovering, setIsHovering] = useState(false)
+  const ref = useRef<U>(null)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const handleMouseEnter = () => {
+      setIsHovering(true)
+    }
+    const handleMouseLeave = () => {
+      setIsHovering(false)
+    }
+
+    element.addEventListener('mouseenter', handleMouseEnter)
+    element.addEventListener('mouseleave', handleMouseLeave)
+
+    return () => {
+      if (element) {
+        element.removeEventListener('mouseenter', handleMouseEnter)
+        element.removeEventListener('mouseleave', handleMouseLeave)
+      }
+    }
+  }, [ref])
+
+  return { isHovering, ref }
+}
+
+// const { ref: hoverRef, isHovering } = useHover<HTMLDivElement>();

src/components/hooks/useMounted/index.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+
+export default function useMounted() {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted
+}
+
+// const mounted = useMounted();