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:
Source Code in Code Sandbox: [Note]
Direct testing on Code sandbox will not work. Use the link to check on another page -
Previous
PHP If-else-elseif and Switch-case
PHP If-else-elseif and Switch-case
Next
PHP String Functions - All necessary String functions in PHP to manage strings better.
PHP String Functions - All necessary String functions in PHP to manage strings better.