Popover

Show content with a trigger in a floating pane.

Features

  • Optional arrow to point to content.

  • Keeps within bounds of page.

  • Can be placed into 12 anchor positions.

Anatomy

import { Popover } from '@tamagui/popover'
export default () => (
<Popover sheetBreakpoint="sm">
<Popover.Trigger />
<Popover.Sheet>
<Popover.Sheet.Overlay />
<Popover.Sheet.Frame>
<Popover.Sheet.ScrollView>
<Popover.SheetContents />
</Popover.Sheet.ScrollView>
</Popover.Sheet.Frame>
</Popover.Sheet>
<Popover.Content>
<Popover.Arrow />
<Popover.Close />
{/* ScrollView is optional, can just put any contents inside if not scrollable */}
<Popover.ScrollView>{/* ... */}</Popover.ScrollView>
{/* ... */}
</Popover.Content>
</Popover>
)

API

Popover

Contains every component for the popover.

Props

  • children (required)

    React.ReactNode

    Must contain Popover.Content

  • size

    SizeTokens

    Passes size down too all sub-components when set for padding, arrow, borderRadius

  • placement

    Placement

    'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

  • open

    boolean

  • defaultOpen

    boolean

  • onOpenChange

    (open: boolean) => void

  • modal

    boolean

    Default: 

    true

    Renders into root of app instead of inline.

  • stayInFrame

    ShiftProps | boolean

    Keeps the Popover inside the frame, see floating-ui shift().

  • allowFlip

    FlipProps | boolean

    Moves the Popover to other sides when space allows it, see floating-ui flip.

  • <Trigger />

    Used to trigger opening of the popover when uncontrolled, just renders a YStack, see Stacks.

    <Content />

    Renders as SizableStack which is just a YStack (see Stacks) with an extra size prop that accepts any SizeTokens.

    Used to display the content of the popover.

    Docs coming soon, we need to finalize a few more things to get the full set of props working

    <Anchor />

    Renders as YStack, see Stacks.

    When you want the Trigger to be in another location from where the Popover attaches, use Anchor. When used, Anchor is where the Popover will attach, while Trigger will open it.

    <Sheet />

    When used alongside sheetBreakpoint, Popover will render as a sheet when that breakpoint is active.

    See Sheet for more props.

    Must use Popover.SheetContents inside the Popover.Sheet.Frame to insert the contents given to Popover.Content

    <ScrollView />

    Must be nested inside Content. Renders as a plain React Native ScrollView. If used alongside sheetBreakpoint and Sheet, Tamagui will automatically know to remove this ScrollView when swapping into the Sheet, as the Sheet must use it's own ScrollView that handles special logic for interactions with dragging.