For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/ui/components/popover.md.
lynx-ui logo
lynx-ui
  • English

      • Popover

      A headless Popover component for ReactLynx. It provides primitives for positioning and anchor tracking.

      Basic Usage

      lynx-ui-popoverBasic/index.tsx
      Code
      Preview

      Extra Anchor

      If you want to add an extra anchor, you can use the PopoverAnchor Component.

      lynx-ui-popoverExtraAnchor/index.tsx
      Code
      Preview

      Cross axis offset adjustment

      Use 'crossAxisOffset' on PopoverPositioner to set the skidding offset of the floating element.

      lynx-ui-popoverOffsetAdjustment/index.tsx
      Code
      Preview

      Structure

      <PopoverRoot>
  <PopoverTrigger />
  <PopoverAnchor>
    <PopoverPositioner>
      <PopoverContent />
      <PopoverArrow />
    </PopoverPositioner>
  </PopoverAnchor>
</PopoverRoot>

      API

      PopoverRoot

      The root component of the Popover, containing all of its child components.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      debugLog
      iOS
      Android
      Harmony
      Typeboolean
      Enable debug log for Popover and its sub-components.
      defaultShow
      iOS
      Android
      Harmony
      Typeboolean
      Determines whether the dialog should be shown by default. Use this property means the Dialog is uncontrolled.
      forceMount
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Mount the toast and render the content even when it's not shown. At this time, the internal state is "initial".
      onClose
      iOS
      Android
      Harmony
      Type() => void
      Triggered when the popover is closed
      onOpen
      iOS
      Android
      Harmony
      Type() => void
      Triggered when the popover is shown
      onVisibleChange
      iOS
      Android
      Harmony
      Type(visible: boolean) => void
      Callback fired when the visibility of the popover changes. This is only called in controlled mode.
      show
      iOS
      Android
      Harmony
      Typeboolean
      Determines whether the dialog should be shown. Use this property means the Dialog is controlled. Do not use this props with 'defaultShow'.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style

      PopoverTrigger

      The element that triggers the Popover to show.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      disabled
      Typeboolean
      Disable this Trigger
      onClick
      iOS
      Android
      Harmony
      Type() => void
      Callback function triggered when the component is clicked
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'

      PopoverPositioner

      Helps position the Content and Arrow correctly.

      autoAdjust
      iOS
      Android
      Harmony
      Typesize | shift
      The auto-adjustment strategy for the popover. Defaults to 'size', which automatically adjusts maxHeight/maxWidth based on the popover size; 'shift' automatically adjusts the position based on the popover width/height.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      crossAxisOffset
      iOS
      Android
      Harmony
      Typenumber
      Additional crossAxis offset. If this prop is set, the popover will be offset by the specified amount in the crossAxis direction.
      placement
      iOS
      Android
      Harmony
      TypePlacement
      The position of the popover
      placementOffset
      iOS
      Android
      Harmony
      Typenumber
      The offset of the popover position
      popoverPositionerProps
      iOS
      Android
      Harmony
      TypeViewProps | OverlayProps
      popoverPositioner supports original view props to be directly spread in this prop.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'
      children
      iOS
      Android
      Harmony
      TypeReactNode | (status: {open?: boolean, closed?: boolean, leaving?: boolean, entering?: boolean, animating?: boolean}) => ReactNode
      children

      State-based styling & rendering

      This component exposes each of its internal states through two interchangeable channels, and the table below maps them one-to-one:

      • CSS className — a class like ui-<state> is toggled on the root node, so you can style it with selectors such as .ui-<state> { ... }.
      • Render-prop field — when children is a function, the same state is passed in via children({ <state>: boolean, ... }) for runtime-driven rendering.
      ui-open
      Render Propopen·Typeboolean
      The popper is opened. Applied when `status.open` is true.
      ui-closed
      Render Propclosed·Typeboolean
      The popper is closed. If it's force mounted, the initial status will be closed. Applied when `status.closed` is true.
      ui-leaving
      Render Propleaving·Typeboolean
      The popper is performing the leaving animation. Takes effect when transition:true. Applied when `status.leaving` is true.
      ui-entering
      Render Propentering·Typeboolean
      The popper is performing the entering animation. Takes effect when transition:true. Applied when `status.entering` is true.
      ui-animating
      Render Propanimating·Typeboolean
      The popper is doing the animations. Takes effect when transition:true. Applied when `status.animating` is true.

      PopoverContent

      The content of the Popover.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children
      className
      iOS
      Android
      Harmony
      Typestring
      className
      popoverContentProps
      iOS
      Android
      Harmony
      TypeViewProps
      PopoverContent supports original view props to be directly spread in this prop.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'

      PopoverArrow

      The arrow of the Popover.

      children
      iOS
      Android
      Harmony
      TypeReactNode
      children. Only use it when you don't want to use the default arrow. Notice when this prop is set, other props like the size and color props will be ignored and the default transform will be different.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      color
      iOS
      Android
      Harmony
      Typestring·Default'black'
      The color of the arrow. Defaults to 'black'
      offset
      iOS
      Android
      Harmony
      Typenumber·Default0
      The offset of the arrow. This prop is useful when the PopoverContent has a rounded corner and should be set to the radius of the rounded corner. Otherwise, the arrow may be placed beside the rounded corner, showing a gap between them.
      size
      iOS
      Android
      Harmony
      Typenumber | [object Object]
      Arrow size. Supports number (equal width/height) or { width, height } (unequal width/height). When using a custom child, ensure size matches the child’s visual size.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      transition
      iOS
      Android
      Harmony
      Typeboolean
      If set to true, the className will has the transition classes like 'ui-entering', 'ui-leaving', 'ui-animating'
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.