Specifying the Content Template
The example below shows how to create a template consisting of static (text) and dynamic (the Button UI component) content.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Popup } from 'devextreme-react/popup';
- import { Button } from 'devextreme-react/button';
- const renderContent = () => {
- return (
- <p>Static content</p>
- <Button
- text="Click me"
- onClick={buttonClick}
- />
- );
- }
- const buttonClick = () => {
- // ...
- }
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isPopupVisible: true
- };
- this.onHiding = this.onHiding.bind(this);
- }
- onHiding() {
- this.setState({
- isPopupVisible: false
- });
- }
- render() {
- return (
- <Popup
- visible={this.state.isPopupVisible}
- title="Popup Title"
- contentRender={renderContent}
- onHiding={this.onHiding}
- />
- );
- }
- }
- export default App;
Switching Templates On the Fly
If you need to render different templates depending on a specific condition, define them inside the Popup container using the DevExtreme dxTemplate markup component. You can switch the templates on the fly by changing the contentTemplate property's value.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Popup } from 'devextreme-react/popup';
- import { Button } from 'devextreme-react/button';
- const firstTemplate = () => {
- return (
- <p>First template</p>
- );
- }
- const secondTemplate = () => {
- return (
- <p>Second template</p>
- );
- }
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isPopupVisible: true,
- renderContent: firstTemplate
- };
- this.changeTemplate = this.changeTemplate.bind(this);
- this.onHiding = this.onHiding.bind(this);
- }
- changeTemplate() {
- this.setState({
- renderContent: this.state.renderContent === firstTemplate ? secondTemplate : firstTemplate
- });
- }
- onHiding() {
- this.setState({
- isPopupVisible: false
- });
- }
- render() {
- return (
- <div>
- <Popup
- title="Popup Title"
- visible={this.state.isPopupVisible}
- onHiding={this.onHiding}
- contentRender={this.state.renderContent}
- />
- <Button
- text="Change the Template"
- onClick={this.changeTemplate}
- />
- </div>
- );
- }
- }
- export default App;
See Also
Add Scrolling
The Popup component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.
You can also implement a scrollbar that belongs to the ScrollView component. This implementation is more flexible. For example, you can enable right-to-left representation or scroll the content to a specific position. For more information about the available options, refer to the ScrollView API section.
To implement this solution, follow the steps below:
Wrap the content in the ScrollView component and place it in the Popup container.
Set the height and width of the ScrollView to
100%
of the popup content area. To enable this functionality, wrap 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.