Interface PopperProps

interface PopperProps {
    animationDuration?: number;
    appendTo?: HTMLElement | "inline" | (() => HTMLElement);
    direction?: "up" | "down";
    distance?: number;
    enableFlip?: boolean;
    entryDelay?: number;
    exitDelay?: number;
    flipBehavior?: "flip" | (
        | "right"
        | "left"
        | "top"
        | "bottom"
        | "top-start"
        | "top-end"
        | "bottom-start"
        | "bottom-end"
        | "left-start"
        | "left-end"
        | "right-start"
        | "right-end")[];
    isVisible?: boolean;
    maxWidth?: string;
    minWidth?: string;
    onBlur?: ((event?: FocusEvent) => void);
    onDocumentClick?: ((event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void);
    onDocumentKeyDown?: ((event?: KeyboardEvent) => void);
    onFocus?: ((event?: FocusEvent) => void);
    onHidden?: (() => void);
    onHide?: (() => void);
    onMount?: (() => void);
    onMouseEnter?: ((event?: MouseEvent) => void);
    onMouseLeave?: ((event?: MouseEvent) => void);
    onPopperClick?: ((event?: MouseEvent) => void);
    onPopperMouseEnter?: ((event?: MouseEvent) => void);
    onPopperMouseLeave?: ((event?: MouseEvent) => void);
    onShow?: (() => void);
    onShown?: (() => void);
    onTriggerClick?: ((event?: MouseEvent) => void);
    onTriggerEnter?: ((event?: KeyboardEvent) => void);
    placement?: Placement;
    popper: ReactElement<any, string | JSXElementConstructor<any>>;
    popperRef?: HTMLElement | RefObject<any> | (() => HTMLElement);
    position?:
        | "start"
        | "right"
        | "center"
        | "end"
        | "left";
    positionModifiers?: {
        bottom?: string;
        bottomEnd?: string;
        bottomStart?: string;
        left?: string;
        leftEnd?: string;
        leftStart?: string;
        right?: string;
        rightEnd?: string;
        rightStart?: string;
        top?: string;
        topEnd?: string;
        topStart?: string;
    };
    preventOverflow?: boolean;
    trigger?: ReactNode;
    triggerRef?: HTMLElement | RefObject<any> | (() => HTMLElement);
    width?: string;
    zIndex?: number;
}

Properties

animationDuration? appendTo? direction? distance? enableFlip? entryDelay? exitDelay? flipBehavior? isVisible? maxWidth? minWidth? onBlur? onDocumentClick? onDocumentKeyDown? onFocus? onHidden? onHide? onMount? onMouseEnter? onMouseLeave? onPopperClick? onPopperMouseEnter? onPopperMouseLeave? onShow? onShown? onTriggerClick? onTriggerEnter? placement? popper popperRef? position? positionModifiers? preventOverflow? trigger? triggerRef? width? zIndex?

Properties

OptionalanimationDuration

animationDuration?: number

The duration of the CSS fade transition animation.

OptionalappendTo

appendTo?: HTMLElement | "inline" | (() => HTMLElement)

The container to append the popper to. Defaults to 'inline'.

Optionaldirection

direction?: "up" | "down"

popper direction

Optionaldistance

distance?: number

Distance of the popper to the trigger

OptionalenableFlip

enableFlip?: boolean

Enable to flip the popper when it reaches the boundary

OptionalentryDelay

entryDelay?: number

Delay in ms before the popper appears

OptionalexitDelay

exitDelay?: number

Delay in ms before the popper disappears

OptionalflipBehavior

flipBehavior?: "flip" | (
    | "right"
    | "left"
    | "top"
    | "bottom"
    | "top-start"
    | "top-end"
    | "bottom-start"
    | "bottom-end"
    | "left-start"
    | "left-end"
    | "right-start"
    | "right-end")[]

The behavior of how the popper flips when it reaches the boundary

OptionalisVisible

isVisible?: boolean

True to make the popper visible

OptionalmaxWidth

maxWidth?: string

Maximum width of the popper. If the value is "trigger", it will set the max width to the trigger element's width

OptionalminWidth

minWidth?: string

Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width

OptionalonBlur

onBlur?: ((event?: FocusEvent) => void)

Callback function when trigger is blurred (focus leaves)

OptionalonDocumentClick

onDocumentClick?: ((event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void)

Callback function when document is clicked

OptionalonDocumentKeyDown

onDocumentKeyDown?: ((event?: KeyboardEvent) => void)

Callback function when keydown event occurs on document

OptionalonFocus

onFocus?: ((event?: FocusEvent) => void)

Callback function when trigger is focused

OptionalonHidden

onHidden?: (() => void)

Callback when popper's hide transition has finished executing

OptionalonHide

onHide?: (() => void)

Lifecycle function invoked when the popper begins to transition out.

OptionalonMount

onMount?: (() => void)

Lifecycle function invoked when the popper has been mounted to the DOM.

OptionalonMouseEnter

onMouseEnter?: ((event?: MouseEvent) => void)

Callback function when mouse enters trigger

OptionalonMouseLeave

onMouseLeave?: ((event?: MouseEvent) => void)

Callback function when mouse leaves trigger

OptionalonPopperClick

onPopperClick?: ((event?: MouseEvent) => void)

Callback function when popper is clicked

OptionalonPopperMouseEnter

onPopperMouseEnter?: ((event?: MouseEvent) => void)

Callback function when mouse enters popper content

OptionalonPopperMouseLeave

onPopperMouseLeave?: ((event?: MouseEvent) => void)

Callback function when mouse leaves popper content

OptionalonShow

onShow?: (() => void)

Lifecycle function invoked when the popper begins to transition in.

OptionalonShown

onShown?: (() => void)

Lifecycle function invoked when the popper has fully transitioned in.

OptionalonTriggerClick

onTriggerClick?: ((event?: MouseEvent) => void)

Callback function when trigger is clicked

OptionalonTriggerEnter

onTriggerEnter?: ((event?: KeyboardEvent) => void)

Callback function when Enter key is used on trigger

Optionalplacement

placement?: Placement

Instead of direction and position can set the placement of the popper

popper

popper: ReactElement<any, string | JSXElementConstructor<any>>

The popper (menu/tooltip/popover) element

Optional BetapopperRef

popperRef?: HTMLElement | RefObject<any> | (() => HTMLElement)

Reference to the popper (menu/tooltip/popover) element. Passing this prop will remove the wrapper div element from the popper.

Optionalposition

position?:
    | "start"
    | "right"
    | "center"
    | "end"
    | "left"

popper position

OptionalpositionModifiers

positionModifiers?: {
    bottom?: string;
    bottomEnd?: string;
    bottomStart?: string;
    left?: string;
    leftEnd?: string;
    leftStart?: string;
    right?: string;
    rightEnd?: string;
    rightStart?: string;
    top?: string;
    topEnd?: string;
    topStart?: string;
}

Map class names to positions, for example: { top: styles.modifiers.top, bottom: styles.modifiers.bottom, left: styles.modifiers.left, right: styles.modifiers.right }

OptionalpreventOverflow

preventOverflow?: boolean

Flag to prevent the popper from overflowing its container and becoming partially obscured.

Optionaltrigger

trigger?: ReactNode

Trigger reference element to which the popper is relatively placed to.

OptionaltriggerRef

triggerRef?: HTMLElement | RefObject<any> | (() => HTMLElement)

A reference to the trigger reference element that can be passed instead of or along with the trigger prop. When passed along with the trigger prop, the div element that wraps the trigger will be removed.

Optionalwidth

width?: string

Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width

OptionalzIndex

zIndex?: number

z-index of the popper element

Settings

Member Visibility

On This Page

Properties