Skip to content

DynamicPopover

Abstracts the positioning of popover elements so that they are visible on the screen
import { DynamicPopover } from '@ensdomains/thorin'
<DynamicPopover
open={getState('isOpen')}
placement="bottom-start"
popover="Popover Information"
onDismiss={() => setState('isOpen', false)}
>
<Button pressed={getState('isOpen')} onClick={() => toggleState('isOpen')}>
Click Me
</Button>
</DynamicPopover>

Props
#

name
type
default
description
animationFn
DynamicPopoverAnimationFunc
-
A function that returns string of the css state for open and closed popover.
children*
Required
ReactElement<DynamicPopoverButtonProps, string | JSXElementConstructor<any>>
-
A Button component. The component will override the onClick and pressed properties of the button.
disabled
boolean
false
If true, will prevent the popover from appearing
flip
boolean
true
If true, will flip the popover to the opposite side if there is not enough space.
offset
number
10
The number of pixels between the button and the popover
open
boolean
false
If true, will display the popover
padding
number
20
If shift is true, sets the minimum number of pixels between the popover and the viewport
placement
"top-start" | "top-center" | "top-end" | "left-start" | "left-center" | "left-end" | "right-start" | "right-center" | "right-end" | "bottom-start" | "bottom-center" | "bottom-end"
top-center
The side and alignment of the popover in relation to the button.
popover*
Required
ReactNode
-
A react node that has includes the styling and content of the popover.
shift
boolean
true
If true, will shift the popover alignment to be remain visible.
onDismiss
() => void
-
The setter for the isOpen variable

DynamicPopoverAnimationFn
#

A function that provides custom animations to the popover appearing and disappearing.

Type

type DynamicPopoverAnimationFunc = (
side: DynamicPopoverSide,
open?: boolean,
) => string

Parameters

name
type
default
description
open
boolean
-
If true, the popover is visible
side*
Required
"top" | "left" | "bottom" | "right"
-
The side of the button that the popover will appear.

Return

Returns a string of css attributes.

<DynamicPopover
animationFn={(side, open) => {
if (open)
return `
transform: scale(1);
visibility: visible;
opacity: 1;
`
return `
transform: scale(0.2);
visibility: hidden;
opacity: 0;
`
}}
open={getState('isOpen')}
placement="bottom-start"
popover="Popover Information"
onDismiss={() => setState('isOpen', false)}
>
<Button pressed={getState('isOpen')} onClick={() => toggleState('isOpen')}>
Click Me
</Button>
</DynamicPopover>

Disabled

Prevents the popover from appearing

<DynamicPopover
disabled={getState('isDisabled')}
open={getState('isOpen')}
placement="bottom-start"
popover="Popover Information"
onDismiss={() => setState('isOpen', false)}
>
<Button pressed={getState('isOpen')} onClick={() => toggleState('isOpen')}>
Click Me
</Button>
<Button
pressed={getState('isDisabled')}
onClick={() => toggleState('isDisabled')}
>
{getState('isDisabled') ? 'Activate Me' : 'Disable Me'}
</Button>
</DynamicPopover>
Edit on GitHub