WindowProps

Defines the container to which the Window will be appended. Defaults to its parent element. If set to null, the Window will be rendered without React Portal.

<Window appendTo={document.body} />

Focus the Window container automatically when mounted. By default, the autoFocus is true.

<Window autoFocus={false} />

Sets a class of the Window DOM element.

<Window className="custom-class" />

Specifies if the Window will render the close button.

<Window closeButton={CustomCloseButton} />

Specifies if the Window stage will change on title double click. This is on by default.

<Window doubleClickStageChange={false} />

Specifies if the Window will be draggable (see example).

<Window draggable={true} />

Specifies the height of the Window (see example).

<Window height={500} />

Sets the id attribute value of the wrapper element of the Window.

<Window id="my-window" />

Specifies the initial height of the Window (see example). The component will be in an uncontrolled mode.

<Window initialHeight={200} />

Specifies the initial left value (see example). The Window will be in an uncontrolled mode.

<Window initialLeft={100} />

Specifies the initial top value (see example). The component will be in an uncontrolled mode.

<Window initialTop={50} />

Specifies the initial width of the Window (see example). The component will be in an uncontrolled mode.

<Window initialWidth={300} />

Specifies the left coordinates of the Window.

<Window left={150} />

Specifies if the Window will render the maximize button.

<Window maximizeButton={CustomMaximizeButton} />

Specifies the minimum height of the Window (see example).

<Window minHeight={100} />

Specifies if the Window will render the minimize button.

<Window minimizeButton={CustomMinimizeButton} />

Specifies the minimum width of the Window (see example).

<Window minWidth={100} />

Specifies if the Window will be modal by rendering an overlay under the component.

<Window modal={true} />

Fires when the Close button in the title is clicked or when the Esc button is pressed.

<Window onClose={(event) => console.log('Window closed', event)} />

Fires when the Window is dragged.

<Window onMove={(event) => console.log('Window moved', event)} />

Fires when the Window resizes.

<Window onResize={(event) => console.log('Window resized', event)} />

Fires when the DEFAULT, FULLSCREEN, or MINIMIZED state of the Window is changed.

<Window onStageChange={(event) => console.log('Stage changed', event)} />

Set styles to the Window overlay element rendered when the modal prop is enabled.

<Window overlayStyle={{ opacity: 0.5 }} />

Specifies if the Window will be resizable (see example).

<Window resizable={true} />

Specifies if the Window will render the restore button.

<Window restoreButton={CustomRestoreButton} />

Specifies if the Window content will update during resizing.

<Window shouldUpdateOnDrag={true} />

Controls the state of the Window (see example).

The supported values are:

• DEFAULT
• MINIMIZED
• FULLSCREEN

<Window stage="DEFAULT" />

Set styles to the Window element.

<Window style={{ backgroundColor: 'red' }} />

Configures the themeColor of the Window.

The available options are:

• primary
• dark
• light

<Window themeColor="dark" />

Specifies the title of the Window (see example).

<Window title="My Window" />

Specifies the top coordinates of the Window.

<Window top={100} />

Specifies the width of the Window.

<Window width={400} />