Popover

Usage

A simple Popover component with basic styles. It gets rendered at the root level so it can be declared wherever you like.

Positioning relative to the "opener"

import { Popover } from '@aragon/ui'

function App() {
  const [visible, setVisible] = useState(false)
  const opener = React.createRef()

  return (
    <div>
      <Button onClick={() => setVisible(true)} ref={opener}>
        Show
      </Button>
      <Popover
        visible={visible}
        opener={opener.current}
        onClose={() => setVisible(false)}
      >
        Popover
      </Popover>
    </div>
  )
}

Demonstration

Props

opener

TYPE
DEFAULT VALUE

DOM Element

null

Reference to the "opener"which is what the Popover is positioning relative to.

closeOnOpenerFocus

TYPE
DEFAULT VALUE

Boolean

false

While the Popover is opened, do not immediately close the Popover when the opener gets focused. This makes it possible to toggle its visibility from the opener, if its placement allows it.

placement

  • Type: String

  • Values: top, bottom, leftand right which can be concatenated with -start and -end e.g. top-start

Placement of the Popover relative to the "opener". Checkout Popper.js for placement visuals.

zIndex

TYPE
DEFAULT VALUE

Number

999

zIndex of Popover.

onClose

TYPE
DEFAULT VALUE

Function

None

The callback that is called when the popover request to be closed. If this callback returns false, the popover will get focused again. This is useful to ensure that the blur event still gets triggered after a close request got rejected.

visible

TYPE
DEFAULT VALUE

Boolean

true

Whether or not the Popover is visible.

scaleEffect

TYPE
DEFAULT VALUE

Boolean

true

Set to false to disable the scaling effect when the popover appears and disappears.

Last updated