`Popover`

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

Basic Usage

Extra Anchor

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

Cross axis offset adjustment

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

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

Type

ReactNode | (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'

#Popover

#Basic Usage

#Extra Anchor

#Cross axis offset adjustment

#Structure

#API

#PopoverRoot

#PopoverTrigger

#PopoverPositioner

State-based styling & rendering

#PopoverContent

#PopoverArrow

`Popover`

Basic Usage

Extra Anchor

Cross axis offset adjustment

Structure

API

PopoverRoot

PopoverTrigger

PopoverPositioner

PopoverContent

PopoverArrow