-
Notifications
You must be signed in to change notification settings - Fork 15
/
useHover.ts
42 lines (32 loc) · 876 Bytes
/
useHover.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { HTMLAttributes, useMemo, useRef, useState } from 'react'
export interface UseHoverProps {
disabled?: boolean
}
export interface UseHoverResult {
isHovered: boolean
hoverProps: HTMLAttributes<HTMLElement>
}
export function useHover(props: UseHoverProps): UseHoverResult {
const [isHovered, setHovered] = useState(false)
const propsRef = useRef<UseHoverProps>({})
// Use ref as cache for reuse props inside memo hook.
propsRef.current = { disabled: props.disabled }
const hoverProps = useMemo(() => {
const props: HTMLAttributes<HTMLElement> = {}
props.onPointerEnter = () => {
const { disabled } = propsRef.current
if (disabled) {
return
}
setHovered(true)
}
props.onPointerLeave = () => {
setHovered(false)
}
return props
}, [])
return {
isHovered,
hoverProps,
}
}