React Window

Overview

The React Window displays content in a non-modal fashion and allows for the window to be moved throughout the page as well as resized based on user requirements.

See React Window Overview demo

React Window - Overview, KendoReact UI Library

Title

Every KendoReact Window component has a title area that can be blank or contain custom text to give the user context around the content of the Window.

See React Window Title demo

React Window - Title, KendoReact UI Library

Positioning & Dragging

While the React Window can be initially displayed anywhere on a page it also has built-in support for being repositioned by dragging the component around.

See React Window Positioning & Dragging demo

React Window - Positioning & Dragging, KendoReact UI Library

Minimizing and Maximizing

Each KendoReact Window has built-in action items for minimizing, maximizing and closing the window.

See React Window Minimizing and Maximizing demo

React Window - Minimizing and Maximizing, KendoReact UI Library

Dimensions

By default, the KendoReact Window has some internal calculations for height and width, but these can easily be overridden by using the width and height bindings of the Window component.

See React Window Dimensions demo

React Window - Dimensions, KendoReact UI Library

Resizing

With a single configuration option, the KendoReact Window can easily be resized by dragging the sides or the corner of the React component.

See React Window Resizing demo

React Window - Resizing, KendoReact UI Library

Controlled & Uncontrolled Modes

By default, the React Window is in an uncontrolled state and can be resized or moved depending on its internal logic. For scenarios that require a controlled component, every aspect of the window can be maintained by controlling the state of the component.

See React Window Controlled & Uncontrolled Modes demo

Keyboard Navigation

To help users traverse the KendoReact Window component with keyboard navigation, the component has several built-in keyboard shortcuts that can be used to not just interact with the Window component itself, but also elements contained within it.

See React Window Keyboard Navigation demo

Accessibility

Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact Window is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

React Window - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.