< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Popup

A simple but effective React JS popup, part of the modern Suite UI library.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Easy customization
  • Ability to display custom HTML content
  • Ability to attach DHTMLX components
  • Ability to hide and show a popup
  • Ability to check the popup visibility
  • Auto positioning
  • Accessibility support

How to Build a React Popup

Follow 5 quick steps to initialize DHTMLX React JS popup component:
Create a Popup.js file and import files and styles of Popup
Create Popup class, which extends the Component class
Add an empty container for Popup with the reference to it in the el property using the ref property
When the component is initialized, initialize Popup and attach the instance of Popup to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Why Choose React Popup by DHTMLX?

React popup component of basic necessity

dhtmlxPopup is a simple and convenient way to create a popup window with any custom content inside. A popup is opened after some user actions, like a button click. You can center a popup depending on the element location, enable autopositioning or specify popup position manually.

Simple set up & maximum flexibility

DHTMLX UI library offers a React JS popup component that can be equipped with any HTML content including text and images. Our users can attach other 20+ widgets like Grid, Calendar or ColorPicker to their popup window. The API ensures adjustable component behavior allowing you to hide/show a popup or check its visibility.

Deep React JS popup customization

You can adapt the dhtmlxPopup look and feel to match your project requirements. For example, you may add new CSS classes with detailed settings to tailor the size, background, borders, shadows and other elements. Thus we provide you with full control over the appearance of your React popup.

Ability to use Angular and Vue.js wrappers

We offer special wrappers to shape DHTMLX components to work with the three most common frameworks. You can integrate our popup component into React, Angular and Vue.js web apps. Download a free trial to try out dhtmlxSuite UI library possibilities.

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:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxPopup integration into your app? Contact us