React Native Mantine › Overlays
HoverCard
Dropdown with additional information on press
Import: import { HoverCard } from 'react-native-mantine';
Usage
import { HoverCard } from 'react-native-mantine';
// Opens on press (touch devices have no hover)
<HoverCard width={280} shadow="md">
<HoverCard.Target>
<Button>Press to reveal</Button>
</HoverCard.Target>
<HoverCard.Dropdown>
<Text size="sm">Additional information</Text>
</HoverCard.Dropdown>
</HoverCard>
// Delays and Popover props are supported
<HoverCard
openDelay={500}
closeDelay={300}
position="top"
withArrow
>
{/* ... */}
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
openDelay | number | 0 | Open delay in ms, applied before the dropdown is shown |
closeDelay | number | 150 | Close delay in ms, applied before the dropdown is hidden |
initiallyOpened | boolean | false | Initial opened state |
onChange | (opened: boolean) => void | Called when the dropdown opened state changes | |
position | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | "bottom" | Dropdown position relative to the target |
width | number | 'target' | 260 | Dropdown width in px or 'target' to match the target width |
shadow | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "md" | Dropdown shadow from theme |
withArrow | boolean | false | Determines whether the dropdown should have an arrow |
children (required) | ReactNode | HoverCard.Target and HoverCard.Dropdown components |