Hover Card

Hover Card Primitive

Demo

Allows users with vision to preview the content hidden behind an element before hovering or pressing.

Installation

CLI

npx @react-native-reusables/cli@latest add hover-card

Manual

Dependencies

Before copy/pasting, add the hover-card primitive to your project.

Copy/paste the following code to ~/components/ui/hover-card.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '~/components/primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import { View } from 'react-native';
import { CalendarDays } from '~/components/Icons';
import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { Button } from '~/components/ui/button';
import { HoverCard, HoverCardContent, HoverCardTrigger } from '~/components/ui/hover-card';
import { Text } from '~/components/ui/text';

function Example() {
  return (
    <View className='flex-1 justify-center items-center p-6 gap-12'>
      <HoverCard>
        <HoverCardTrigger asChild>
          <Button variant='link' size='lg'>
            <Text>@nextjs</Text>
          </Button>
        </HoverCardTrigger>
        <HoverCardContent className='w-80 native:w-96'>
          <View className='flex flex-row justify-between gap-4'>
            <Avatar alt='Vercel avatar'>
              <AvatarImage source={{ uri: 'https://github.com/vercel.png' }} />
              <AvatarFallback>
                <Text>VA</Text>
              </AvatarFallback>
            </Avatar>
            <View className='gap-1 flex-1'>
              <Text className='text-sm native:text-base font-semibold'>@nextjs</Text>
              <Text className='text-sm native:text-base'>
                The React Framework – created and maintained by @vercel.
              </Text>
              <View className='flex flex-row items-center pt-2 gap-2'>
                <CalendarDays size={14} className='text-foreground opacity-70' />
                <Text className='text-xs native:text-sm text-muted-foreground'>
                  Joined December 2021
                </Text>
              </View>
            </View>
          </View>
        </HoverCardContent>
      </HoverCard>
    </View>
  );
}

Props

HoverCard

Extends View props

Prop	Type	Note
open	boolean	(optional)
onOpenChange	(value: boolean) => void	(optional)
defaultOpen	boolean	(optional)
asChild	boolean	(optional)
relativeTo	’longPress’ | ‘trigger’	Native Only_(optional)_

HoverCardTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)

HoverCardContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	(optional)
insets	Insets	(optional)
avoidCollisions	boolean	(optional)
align	’start’ | ‘center’ | ‘end’	(optional)
side	’top’ | ‘bottom’	(optional)
sideOffset	number	(optional)
disablePositioningStyle	boolean	Native Only (optional)
collisionBoundary	Element | null | Array<Element | null>	Web Only (optional)
sticky	’partial’ | ‘always’	Web Only (optional)
hideWhenDetached	boolean	Web Only (optional)