useHover

useHover.js

import { useMemo, useState } from 'react'

export const useHover = () => {
  const [isHovered, setIsHovered] = useState(false)

  const binds = useMemo(
    () => ({
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false)
    }),
    [setIsHovered]
  )

  return [isHovered, binds]
}