mirror of
https://github.com/facebook/react.git
synced 2026-02-26 02:25:04 +00:00
76 lines
1.5 KiB
Markdown
76 lines
1.5 KiB
Markdown
# Hover
|
|
|
|
The `useHover` hook responds to hover events on the element it wraps. Hover
|
|
events are only dispatched for `mouse` and `pen` pointer types. Hover begins
|
|
when the pointer enters the element's bounds and ends when the pointer leaves.
|
|
|
|
Hover events do not propagate between `useHover` event responders.
|
|
|
|
```js
|
|
// Example
|
|
const Link = (props) => (
|
|
const [ isHovered, setHovered ] = useState(false);
|
|
const hover = useHover({
|
|
onHoverChange: setHovered
|
|
});
|
|
|
|
return (
|
|
<a
|
|
{...props}
|
|
href={props.href}
|
|
listeners={hover}
|
|
style={{
|
|
...props.style,
|
|
textDecoration: isHovered ? 'underline': 'none'
|
|
}}
|
|
/>
|
|
);
|
|
);
|
|
```
|
|
|
|
## Types
|
|
|
|
```js
|
|
type HoverEventType = 'hoverstart' | 'hoverend' | 'hoverchange' | 'hovermove';
|
|
|
|
type HoverEvent = {|
|
|
clientX: number,
|
|
clientY: number,
|
|
pageX: number,
|
|
pageY: number,
|
|
pointerType: PointerType,
|
|
target: Element,
|
|
timeStamp: number,
|
|
type: HoverEventType,
|
|
x: number,
|
|
y: number,
|
|
|};
|
|
```
|
|
|
|
## Props
|
|
|
|
### disabled: boolean
|
|
|
|
Disables the responder.
|
|
|
|
### onHoverChange: boolean => void
|
|
|
|
Called when the element changes hover state (i.e., after `onHoverStart` and
|
|
`onHoverEnd`).
|
|
|
|
### onHoverEnd: (e: HoverEvent) => void
|
|
|
|
Called once the element is no longer hovered.
|
|
|
|
### onHoverMove: (e: HoverEvent) => void
|
|
|
|
Called when the pointer moves within the hit bounds of the element.
|
|
|
|
### onHoverStart: (e: HoverEvent) => void
|
|
|
|
Called once the element is hovered.
|
|
|
|
### preventDefault: boolean = true
|
|
|
|
Whether to `preventDefault()` native events.
|