
Categories -
React Js
JavaScript
Tags -
React Js
JavaScript
Maniruzzaman Akash
9 months ago
2609
1 minute
0
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.
Popular Tutorials
Categories
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
8
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
CSS
2
-
Design Pattern in PHP
2
-
E-Book
1
-
Git Commands
1
-
HTML
3
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
11
-
Laravel PHP Framework
36
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
7
-
React Js
19
-
React Native
1
-
Redux
2
-
Tailwind CSS
1
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2