Skip to content
Developer
Intergalactic

Popper

Utils 🛠
4.16.12
DesignAPIChangelog

Popper

This is a wrapper for creating a context, which does not create additional nodes in the house.

import Popper from '@semcore/ui/popper';
<Popper />;
interface
IPopperProps extends IOutsideClickProps, IPortalProps, IUniqueIDProps, IScaleProps
PropertyDescription
strategy
Strategy = absolute

Popper can have different positioning options

modifiers
Modifiers

Modifiers for popper.js

placement
Placement = auto

The position of the popper relative to the trigger that called it. 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'

interaction
"click" | "hover" | "focus" | "none" | eventInteraction = click

Interaction with a trigger to show and hide the popper

timeout
number | [numbernumber]

Timer to show and hide the popper

visible
boolean

Popper visibility value

defaultVisible
boolean = false

Default popper visibility

onVisibleChange
(visible: boolean, e: Event) => boolean | void

Function called when visibility changes

offset
Partial<OptionsOffset> | number | [numbernumber]

PopperJS modifier settings for popper indent

preventOverflow
Partial<OptionsPreventOverflow>

PopperJS modifier settings for finding borders

arrow
Partial<OptionsArrow>

PopperJS modifier settings responsible for the arrow

flip
Partial<OptionsFlip>

PopperJS modifier settings responsible for turning the popper when there is not enough space

computeStyles
Partial<OptionsComputeStyles>

PopperJS modifier settings for applying styles

eventListeners
Partial<OptionsEventListeners>

PopperJS modifier settings responsible for subscribing to global events

onFirstUpdate
Options["onFirstUpdate"]
positionFixed
boolean
deprecated v4.0.0
use IPopperProps.strategy instead

By default, Popper is styled as position: absolute. Allows to switch to fixed

eventsDisabled
boolean
deprecated v4.0.0
use IPopperProps.eventListeners instead

Turns off subscription to global resize/scroll events

displayEvents
{show: string[]hide: string[]}
deprecated v4.0.0
use IPopperProps.interaction instead

Trigger events to show and hide the popper

displayTimeout
{show: numberhide: number}
deprecated v4.0.0
use IPopperProps.timeout instead

Trigger timer to show and hide the popper

popperZIndex
string | number
deprecated v4.0.0

z-index Popper.Popper

boundary
"scrollParent" | "viewport" | "window" | HTMLElement
deprecated v4.0.0
use IPopperProps.preventOverflow instead

Defines the border element used by Popper for its flip and preventOverflow modifiers. Three abbreviated keywords are supported; Popper will find the correct DOM element. 'scrollParent' | 'viewport' | 'window' | HTMLElement

Popper.Trigger

The element to which <Popper.Popper/> will be attached.

import Popper from '@semcore/ui/popper';
<Popper.Trigger />;
interface
IPopperTriggerProps extends IBoxProps

Popper.Popper

The element which will be attached to <Popper.Trigger/>.

import Popper from '@semcore/ui/popper';
<Popper.Popper />;
interface
IPopperPopperProps extends IBoxProps, INeighborLocationProps