React Window Component

Name: React Window Component | DHTMLX Window
Rating: 4.7 (52 reviews)

Cross-browser React window component with movable dialogs, flexible content, rich modes, smooth customization,
and fast Suite UI integration.

Download

View more demos

Compatible with:

Vue.js

JavaScript

Angular

Product Features

Cross-browser compatibility
Support for IE11+
Easy customization
Full control with JavaScript API
Fullscreen mode
Modal mode
Movable mode

Resizable mode
Multiple windows per page
Ability to overlap
Ability to attach HTML content and other DHTMLX components
Virtual area
Support for Angular, React, Vue.js

How to Initialize React Window Component

Follow these 5 easy steps to create a React window:

Create a Window.js file and import files and styles of Window

Create Window class, which extends the Component class

Add an empty container for Window with the reference to it in the el property using the ref property

When the component is initialized, initialize Window and attach the instance of Window to the container with the reference to it in the el property

Specify a set of configuration properties if needed

Check the demo on Github

Why Choose React Window by DHTMLX?

React window with convenient modes

dhtmlxWindow component allows building windows with cross-browser support. The widget copies the behavior of operating system dialog boxes. You can enjoy the common functionality innate to the desktop environment. Our React window is resizable and movable. Users will be able to close the widget, hide it or make full-screen, put on top, etc.

Rich feature set & simple configuration

DHTMLX library allows creating a React JS modal window of any complexity. They can overlap each other, be dragged across the screen or cross the borders’ of a browser window. You can build multiple items on a single page and specify their sizes. It’s possible to attach some HTML content or integrate any other DHTMLX components into your React modal window.

Advanced API for smooth customization

The look and feel of the React window can be modified according to your project requirements. You can replace the default Material-based icons by any other icon font pack and apply custom CSS classes. Besides initial Toolbar controls, it’s possible to add other buttons into the header and footer on the fly.

Integrations with Angular and Vue.js

Our React window is one of the 20+ components of the leading-edge Suite UI library. You will be able to build feature-rich web applications compatible with modern browsers, including IE11+. We provide integration support for React, Angular, and Vue.js as for the most popular web frameworks. Download a trial package and assess Suite potential within 30 days for free.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support: