React Popup - Getting Started
The Popup displays content in a window that overlays the current view.
This tutorial explains how to add a Popup to a page, define its content, and configure its core features. The following control demonstrates the result:
Refer to the following sections for details on each configuration step. You can also find the full code in the following GitHub repository: Getting Started with Popup.
Create a Popup
Add DevExtreme to your React application and use the following code to create a Popup:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import {
- Popup
- } from 'devextreme-react/popup';
- const App = () => {
- return (
- <div className="App">
- <Popup id="popup">
- {/* Configuration goes here */}
- </Popup>
- </div>
- );
- }
- export default App;
Add Content to the Popup
You can define static content in the Popup's markup or use the contentTemplate when the content is dynamic. In the code below, the content is static but we use contentTemplate as dynamic content will be added at a later stage.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import {
- Popup
- } from 'devextreme-react/popup';
- import logo from "./assets/images/dx-logo.png";
- const renderContent = () => {
- return (
- <>
- <img src={logo} alt="logo" />
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Penatibus et magnis dis parturient. Eget
- dolor morbi non arcu risus. Tristique magna sit amet
- purus gravida quis blandit. Auctor urna nunc id cursus
- metus aliquam eleifend mi in. Tellus orci ac auctor
- augue mauris augue neque gravida. Nullam vehicula ipsum
- a arcu. Nullam ac tortor vitae purus faucibus ornare
- suspendisse sed nisi. Cursus in hac habitasse platea
- dictumst. Egestas dui id ornare arcu. Dictumst
- vestibulum rhoncus est pellentesque elit ullamcorper
- dignissim.
- </p>
- <p>
- Mauris rhoncus aenean vel elit scelerisque mauris
- pellentesque pulvinar. Neque volutpat ac tincidunt vitae
- semper quis lectus. Sed sed risus pretium quam vulputate
- dignissim suspendisse in. Urna nec tincidunt praesent
- semper feugiat nibh sed pulvinar. Ultricies lacus sed
- turpis tincidunt id aliquet risus feugiat. Amet cursus
- sit amet dictum sit amet justo donec enim. Vestibulum
- rhoncus est pellentesque elit ullamcorper. Id aliquet
- risus feugiat in ante metus dictum at.
- </p>
- </>
- )
- }
- const App = () => {
- return (
- <div className="App">
- <Popup
- contentRender={renderContent}
- />
- </div>
- );
- }
- export default App;
Show and Hide the Popup
Enable the visible property to show the Popup. In the code below, the value of this property is bound to a state variable with the React useState hook. The togglePopup
function toggles the value between true and false when users click the Open Popup button.
Call the togglePopup function when the onHiding event fires to hide the Popup. Users can also hide the Popup when they click outside its boundaries. To enable this functionality, set the closeOnOutsideClick property to true.
- import React, { useState } from 'react';
- // ...
- import { Button } from 'devextreme-react/button';
- const App = () => {
- const [isPopupVisible, setPopupVisibility] = useState(true);
- const togglePopup = () => {
- setPopupVisibility(!isPopupVisible);
- };
- return (
- <div className="App">
- <Popup
- visible={isPopupVisible}
- closeOnOutsideClick={true}
- onHiding={togglePopup}
- />
- <Button
- text="Open popup"
- onClick={togglePopup}
- />
- </div>
- );
- }
- export default App;
Resize the Popup
Use the height and width properties to set the Popup's size. Set the [resizeEnabled] property to true to allow users to resize the Popup.
- // ...
- const App = () => {
- // ...
- return (
- <div className="App">
- <Popup
- width={500}
- height={500}
- resizeEnabled={true}
- />
- {/* ... */}
- </div>
- );
- }
- export default App;
Add Scrolling
Users can scroll the Popup's content. To enable this functionality, wrap the content into the ScrollView component and set its height and width to 100% of the Popup content area:
- // ...
- import ScrollView from 'devextreme-react/scroll-view';
- const renderContent = () => {
- return (
- <>
- <ScrollView height="100%" width="100%">
- {/* ... */}
- </ScrollView>
- </>
- )
- };
- const App = () => {
- // ...
- return (
- <div className="App">
- <Popup
- contentRender={renderContent}
- />
- </div>
- );
- }
- export default App;
Position the Popup
Use the position property to position the Popup within the viewport. Users can also drag and drop the Popup to change its position. To enable this functionalty, set the dragEnabled property to true. Users drag the Popup by its title bar, so make sure that you have configured it.
- // ...
- const App = () => {
- // ...
- return (
- <div className="App">
- <Popup
- dragEnabled={true}
- position="center"
- />
- {/* ... */}
- </div>
- );
- }
- export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.