useHover
Track hover state and spread handlers that satisfy both React Native's hover props and the DOM's mouse events.
useHover returns [hovered, handlers]. Handlers cover both RN's onHoverIn / onHoverOut and DOM's onMouseEnter / onMouseLeave, so they spread cleanly onto a <Pressable> or <View> regardless of platform. <ListGroup.Item> uses this hook for its hover background.Loading demo…
import { Pressable } from 'react-native';
import { Block, Card, Text, useHover } from '@plocks/ui';
export function Demo() {
const [hovered, hoverHandlers] = useHover();
return (
<Block align="flex-start">
<Text size="sm" c="muted">
Hover the card below (web only — touch devices show no hover state).
</Text>
<Pressable {...hoverHandlers}>
<Card p="md" variant={hovered ? 'elevated' : 'outline'} bg={hovered ? 'primary' : undefined}>
<Text fw={hovered ? '700' : '500'}>{hovered ? 'Hovered' : 'Hover me'}</Text>
</Card>
</Pressable>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources