React - how to make common component to use on all pages

See more:

ReactJS

React Js

I want to use a load panel all over the pages from a function call like ShowLoadingPanel() and HideLoadingPanel(). How can I achieve that with making a common component so that I don't have to declare it on all of the pages?

What I have tried:

Page1

<pre>import React from "react";
import { LoadPanel } from "devextreme-react/load-panel";

export default class extends React.Component {
  state = {
    loadPanelVisible: true,
  };

  componentDidMount() {
    this.setState({
      loadPanelVisible: false,
    });
  }

  render() {
    return (
      <React.Fragment>
        <LoadPanel visible={this.state.loadPanelVisible} />
      </React.Fragment>
    );
  }
}

Page2

<pre>import React from "react";
import { LoadPanel } from "devextreme-react/load-panel";

export default class extends React.Component {
  state = {
    loadPanelVisible: true,
  };

  componentDidMount() {
    this.setState({
      loadPanelVisible: false,
    });
  }

  render() {
    return (
      <React.Fragment>
        <LoadPanel visible={this.state.loadPanelVisible} />
      </React.Fragment>
    );
  }
}