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.