How to make the react web app full screen

Issue

I want to make my react web app full screen after user go to specific web page (no address bar, no navigation bar, only display the web page). I tried many modules online, but they didn't work. Is there a good solution for this problem?

Solution

One way is to just select the container that you want to place the app within. For example, say you want to keep all the styles from the parent application, you could target the body in your ReactDOM render.

ReactDOM.render(
  <ActiveWidgetArea widgets={yourData}/>,
  document.querySelector('body')
);

I tried this in a Drupal site, and it filled the screen with my React App, but left a lot of things intact. Perhaps these were things loaded after the React app loaded. You could also target the html element.

It might also help to know what your parent application is, how the rest of the site is built.

Answered By - icicleking