Make a Full screen Layout - Collapse and Close Using React Component

Making a Full-screen app using React is simple.

Let's make a Full-screen app using React with Little bit of the plugin of

Install Fullscreen Library

npm i react-full-screen

Add necessary Libraries to test our project

npm i @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

App.js

import "./styles.css";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faArrowsAlt,
  faExpandArrowsAlt
} from "@fortawesome/free-solid-svg-icons";

export default function App() {
  const handle = useFullScreenHandle();

  return (
    <div className="App">
      <button onClick={handle.enter}>
        <FontAwesomeIcon icon={faExpandArrowsAlt} />
        <i className="fa fa-expand"></i>
      </button>

      <FullScreen handle={handle}>
        <div
          style={{
            background: "#233",
            padding: 20,
            marginTop: 20,
            color: "#fff"
          }}
        >
          {handle.active && (
            <button onClick={handle.exit}>
              <FontAwesomeIcon icon={faArrowsAlt} />
            </button>
          )}
          <h1>Hello React Full Screen Example</h1>
          <h2>
            Just click on expand button to make full screen
            <br />
          </h2>
        </div>
      </FullScreen>
    </div>
  );
}

In styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.fullscreen {
  background: #fff !important;
}

Live Link to test full-screen:

https://g4y7l0.csb.app/

Source Code in Code Sandbox: [Note]

Direct testing on Code sandbox will not work. Use the link to check on another page -

https://g4y7l0.csb.app/