Make a Full screen Layout - Collapse and Close Using React Component
Categories - React Js JavaScript Tags - React Js JavaScript   Maniruzzaman Akash   2 years ago   6484   1 minute   28

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



import "./styles.css";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
} 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>

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


In styles.css

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

.fullscreen {
  background: #fff !important;


Live Link to test full-screen:


Source Code in Code Sandbox: [Note]

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




PHP If-else-elseif and Switch-case
PHP String Functions - All necessary String functions in PHP to manage strings better.