AragonAN DAO
Search…
⌃K
Links

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.
Previous
Help
Next
Modal
Last modified 6mo ago