New to KendoReactStart a free 30-day trial

PopupProps

Interface

Represents the props of the KendoReact Popup component.

Definition

Package:@progress/kendo-react-popup

Properties

anchor?

null | HTMLElement

Specifies the element which will be used as an anchor (see example). The Popup opens next to that element.

Example:
jsx
<Popup anchor={document.getElementById('anchorElement')} />

Specifies the pivot point of the anchor (see example).

Example:
jsx
<Popup anchorAlign={{ horizontal: 'left', vertical: 'top' }} />

Controls the Popup animation (see example). By default, the opening and closing animations are enabled.

Default:

true

Example:
jsx
<Popup animate={false} />

appendTo?

null | HTMLElement

Defines the container to which the Popup will be appended. Defaults to body.

  • If set to null the Popup will be rendered without React Portal.
Default:

document.body

Example:
jsx
<Popup appendTo={document.getElementById('container')} />

className?

string | string[]

Specifies a list of CSS classes that will be added to the Popup element.

Example:
jsx
<Popup className="custom-class" />

Configures the collision behavior of the Popup (see example).

Example:
jsx
<Popup collision={{ horizontal: 'fit', vertical: 'flip' }} />

id?

string

Specifies the id that will be added to the Popup element.

Example:
jsx
<Popup id="popup-id" />

Configures the margin value that will be added to the popup dimensions in pixels and leaves a blank space between the popup and the anchor.

Example:
jsx
<Popup margin={{ horizontal: 10, vertical: 10 }} />

Specifies the absolute position of the element (see example). The Popup opens next to that point. The pivot point of the Popup is defined by the popupAlign configuration option. The boundary detection is applied by using the window viewport.

Example:
jsx
<Popup offset={{ left: 100, top: 200 }} />

onClose?

(event: CloseEvent) => void

Fires after the Popup is closed.

Parameters:eventCloseEvent
Example:
jsx
<Popup onClose={(event) => console.log('Popup closed')} />

Fires when the mousedown event is triggered outside the Popup.

Parameters:eventMouseDownOutsideEvent
Example:
jsx
<Popup onMouseDownOutside={(event) => console.log('onMouseDownOutside')} />

onOpen?

(event: OpenEvent) => void

Fires after the Popup is opened and the opening animation ends.

Parameters:eventOpenEvent
Example:
jsx
<Popup onOpen={(event) => console.log('Popup opened')} />

onPosition?

(event: PositionEvent) => void

Fires after the Popup position is set.

Parameters:eventPositionEvent
Example:
jsx
<Popup onPosition={(event) => console.log('Popup positioned')} />

Specifies the pivot point of the Popup (see example).

Example:
jsx
<Popup popupAlign={{ horizontal: 'center', vertical: 'bottom' }} />

popupClass?

string | string[] | { [key: string]: boolean }

Specifies a list of CSS classes that will be added to the internal animated element (see example).

Example:
jsx
<Popup popupClass="custom-popup-class" />

positionMode?

PositionMode

Specifies the position mode of the component. By default, the Popup uses absolute positioning. To make the Popup acquire fixed positioning, set this option to fixed.

Default:

"absolute"

Example:
jsx
<Popup positionMode="fixed" />

scale?

number

Used to set the document scale when using a scale transform.

The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.

Using this token is not necessary for user-applied browser zoom.

Example:
jsx
<Popup scale={1.5} />

show?

boolean

Controls the Popup visibility (see example). Defaults to false.

Default:

false

Example:
jsx
<Popup show={true} />

style?

CSSProperties

Represents the styles that are applied to the Popup.

Example:
jsx
<Popup style={{ width: '200px', height: '100px' }} />