`<Popover />`

The Popover component is used to display some content on top of another.

Controlling open

The popover is controlled through open. Set it inside startTransition. A closed popover pre-renders its content hidden, in a transition, once the reference element shows intent to open it (focus, a pointer entering or pressing it). When open changes in a transition too, React keeps rendering that content in the background if the open comes before it is done, instead of rendering it synchronously in the click. Content that was pre-rendered already shows in the first frame after the click either way.

import {Button, Popover, Text} from '@sanity/ui'
import {startTransition, useState} from 'react'

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <Popover content={<Text size={1}>Hello, world</Text>} open={open} padding={3}>
      <Button
        onClick={() => startTransition(() => setOpen((isOpen) => !isOpen))}
        text="Toggle"
      />
    </Popover>
  )
}import {Button, Popover, Text} from '@sanity/ui'
import {startTransition, useState} from 'react'

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <Popover content={<Text size={1}>Hello, world</Text>} open={open} padding={3}>
      <Button
        onClick={() => startTransition(() => setOpen((isOpen) => !isOpen))}
        text="Toggle"
      />
    </Popover>
  )
}

Wrap the state update itself: a startTransition around code that schedules the update for later (a timeout) does not reach it. Reset open from an event handler or in a transition as well, not during render: a render-phase update is applied on top of the render in progress and is not rebased over a pending transition, so a setOpen(false) made during render while an opening transition has not committed yet (its render suspended on the content, say) is lost, and the open applies afterwards.

Properties

animate?: boolean

Whether the Popover should animate in and out.

arrow?: boolean

floatingBoundary?: HTMLElement | null

referenceBoundary?: HTMLElement | null

boundaryElement?: HTMLElement | null

deprecated

Use floatingBoundary and/or referenceBoundary instead.

children?: React.ReactElement

constrainSize?: boolean

content?: React.ReactNode

disabled?: boolean

open?: boolean

Whether the popover is open. Set it inside startTransition, see Controlling open.

padding?: number | number[]

placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'bottom' | 'bottom-start' | 'bottom-end'placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'bottom' | 'bottom-start' | 'bottom-end'

portal?: boolean

Whether or not to render the popover in a portal element.

preventOverflow?: boolean

radius?: number | number[]

referenceElement?: HTMLElement | null

scheme?: 'dark' | 'light'