Getting Started
Hooks
useBooleanuseClickAnyWhereuseCopyToClipboarduseCountdownuseCounteruseDarkModeuseDebounceCallbackuseDebounceValueuseDocumentTitleuseEventCallbackuseEventListeneruseHoveruseIntersectionObserveruseIntervaluseIsClientuseIsMounteduseIsomorphicLayoutEffectuseLocalStorageuseMapuseMediaQueryuseOnClickOutsideuseReadLocalStorageuseResizeObserveruseScreenuseScriptuseScrollLockuseSessionStorageuseStepuseTernaryDarkModeuseTimeoutuseToggleuseUnmountuseWindowSize
useHover
Custom hook that tracks whether a DOM element is being hovered over.
Usage
import{ useRef}from'react'import{ useHover}from'usehooks-ts'exportdefaultfunctionComponent(){const hoverRef=useRef(null)const isHover=useHover(hoverRef)return(<divref={hoverRef}>{`The current div is${isHover?`hovered`:`unhovered`}`}</div>)}API
▸useHover<T>(elementRef):boolean
Custom hook that tracks whether a DOM element is being hovered over.
Type parameters
| Name | Type | Description |
|---|---|---|
T | extendsHTMLElement =HTMLElement | The type of the DOM element. Defaults toHTMLElement. |
Parameters
| Name | Type | Description |
|---|---|---|
elementRef | RefObject<T> | The ref object for the DOM element to track. |
Returns
boolean
A boolean value indicating whether the element is being hovered over.
Hook
import{ useState}from'react'importtype{ RefObject}from'react'import{ useEventListener}from'usehooks-ts'exportfunctionuseHover<Textends HTMLElement= HTMLElement>( elementRef: RefObject<T>,):boolean{const[value, setValue]=useState<boolean>(false)consthandleMouseEnter=()=>{setValue(true)}consthandleMouseLeave=()=>{setValue(false)}useEventListener('mouseenter', handleMouseEnter, elementRef)useEventListener('mouseleave', handleMouseLeave, elementRef)return value}