Developer Popper
This is a wrapper for creating a context, which doesn't create additional nodes in the house.
jsx
import Popper from 'intergalactic/popper';
<Popper />;import Popper from 'intergalactic/popper';
<Popper />;PopperProps
& & & & {...}| Name | Type | Description |
|---|---|---|
| strategy | Popper can have different positioning options | |
| modifiers | Modifiers for popper.js | |
| placement | 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" | | 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 | Default popper visibility |
| onVisibleChange | (visible: boolean, e: ) => boolean | void | Function called when visibility changes |
| offset | Partial<> | number | [number, number] | PopperJS modifier settings for popper indent |
| preventOverflow | Partial<> | PopperJS modifier settings for finding borders |
| arrow | Partial<> | PopperJS modifier settings responsible for the arrow |
| flip | Partial<> | PopperJS modifier settings responsible for turning the popper when there is not enough space |
| computeStyles | Partial<> | PopperJS modifier settings for applying styles |
| eventListeners | Partial<> | PopperJS modifier settings responsible for subscribing to global events |
| onFirstUpdate | ["onFirstUpdate"] | |
| disabled | boolean | Flag for disable Popover (if true, it will close Popper and it will not respond to handlers) |
| disableEnforceFocus | boolean | Disabled focus trap, autofocus and focus return |
| focusLoop | boolean | |
| explicitTriggerSet | boolean | If enabled, you will need to use setTrigger function from children rendering function to set popper trigger. |
| cursorAnchoring | boolean | If set, popper will be placed near the place mouse cursor entered the trigger |
Popper.Trigger
The element to which <Popper.Popper/> will be attached.
jsx
import Popper from 'intergalactic/popper';
<Popper.Trigger />;import Popper from 'intergalactic/popper';
<Popper.Trigger />;PopperTriggerProps
& {...}| Name | Type | Description |
|---|---|---|
| disableEnforceFocus | boolean | Disabled focus trap, autofocus and focus return |
Popper.Popper
The element which will be attached to <Popper.Trigger/>.
jsx
import Popper from 'intergalactic/popper';
<Popper.Popper />;import Popper from 'intergalactic/popper';
<Popper.Popper />;PopperPopperProps
& & & {...}| Name | Type | Description |
|---|---|---|
| disableEnforceFocus | boolean | Disabled focus trap, autofocus and focus return |