React Hook) hover시 state를 변경하는 Hook (useHover)

 

컴포넌트의 호버 여부를 리액트 state와 연결하기 위해 만든 훅이다.

'use client'

import { RefObject, useEffect, useRef, useState } from 'react'

export const useHover = <T extends HTMLElement>(): [RefObject<T>, boolean] => {
  const [isHover, setIsHover] = useState<boolean>(false)
  const ref = useRef<T>(null)

  const handleMouseOver = () => {
    setIsHover(true)
  }

  const handleMouseOut = () => {
    setIsHover(false)
  }

  useEffect(() => {
    const element = ref.current
    element?.addEventListener('mouseover', handleMouseOver)
    element?.addEventListener('mouseout', handleMouseOut)

    return () => {
      element?.removeEventListener('mouseover', handleMouseOver)
      element?.removeEventListener('mouseout', handleMouseOut)
    }
  }, [])

  return [ref, isHover]
}

 

아래와 같이, 제네릭과 함께 사용하면 된다.

// ...
const [uploadButtonRef, isHoveringUploadButton] = useHover<HTMLButtonElement>()
// ...