Skip to content

Popper

This is a wrapper for creating a context, which doesn't create additional nodes in the house.

import Popper from '@semcore/ui/popper';
<Popper />;
typePopperProps
OutsideClickProps & PortalProps & UniqueIDProps & Omit<ScaleProps"placement"> & {...}
PropertyDescription
strategy
Strategy = absolute

Popper can have different positioning options

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 | [number, number]

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 | [number, number]

PopperJS modifier settings for popper indent

preventOverflow

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

PopperJS modifier settings for applying styles

eventListeners

PopperJS modifier settings responsible for subscribing to global events

onFirstUpdate
Options["onFirstUpdate"]
disableEnforceFocus
boolean

Disabled focus trap, autofocus and focus return

Popper.Trigger

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

import Popper from '@semcore/ui/popper';
<Popper.Trigger />;
typePopperTriggerProps
BoxProps & {...}

Popper.Popper

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

import Popper from '@semcore/ui/popper';
<Popper.Popper />;
typePopperPopperProps
BoxProps & NeighborLocationProps & {...}
PropertyDescription
disableEnforceFocus
boolean

Disabled focus trap, autofocus and focus return