React LoadPanel - Hide the Pane

The pane is the element that lies under the loading indicator and text.

DevExtreme HTML5 JavaScript LoadPanel

The pane is shown by default. To hide it, assign false to the showPane property.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { LoadPanel } from 'devextreme-react/load-panel';
  • import { Button } from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • isLoadPanelVisible: false
  • };
  •  
  • this.handleClick = this.handleClick.bind(this);
  • this.handleHide = this.handleHide.bind(this);
  • }
  •  
  • handleClick() {
  • this.setState({
  • isLoadPanelVisible: true
  • });
  • }
  •  
  • handleHide() {
  • this.setState({
  • isLoadPanelVisible: false
  • });
  • }
  •  
  • render() {
  • return (
  • <div>
  • <LoadPanel
  • hideOnOutsideClick={true}
  • showPane={false}
  • visible={this.state.isLoadPanelVisible}
  • onHidden={this.handleHide}
  • />
  • <Button
  • text="Show the Load Panel"
  • onClick={this.handleClick}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • export default App;
See Also