useHover

Track hover state and spread handlers that satisfy both React Native's hover props and the DOM's mouse events.

Hover state

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
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
hovered
,
 hoverHandlers
]
 
=
 
useHover
(
)
;
 
  
return
 
(
    
<Block
 
align
=
"flex-start"
>
      
<Text
 
size
=
"sm"
 
color
=
"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
 
weight
=
{
hovered 
?
 
'700'
 
:
 
'500'
}
>
{
hovered 
?
 
'Hovered'
 
:
 
'Hover me'
}
</Text
>
        
</Card
>
      
</Pressable
>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap