https://github.com/bunlong/react-fullscreen-html
The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
https://github.com/bunlong/react-fullscreen-html
full-screen fullscreen fullscreen-mode react react-fullscreen-html reactjs
Last synced: 9 months ago
JSON representation
The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
- Host: GitHub
- URL: https://github.com/bunlong/react-fullscreen-html
- Owner: Bunlong
- License: mit
- Created: 2020-08-17T08:45:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-29T07:54:25.000Z (almost 6 years ago)
- Last Synced: 2024-12-20T20:36:03.190Z (over 1 year ago)
- Topics: full-screen, fullscreen, fullscreen-mode, react, react-fullscreen-html, reactjs
- Language: TypeScript
- Homepage:
- Size: 47.9 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-fullscreen-html
The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
[](https://www.npmjs.com/package/react-fullscreen-html) [](https://www.npmjs.com/package/react-fullscreen-html)  [](https://travis-ci.com/Bunlong/react-fullscreen-html) [](https://standardjs.com)
## 🎁 Features
* Compatible with both JavaScript and TypeScript
* Compatible with both Desktop and Mobile browsers
* Compatible with all browsers
* No dependency
* Easy to use
## 🔧 Install
react-fullscreen-html is available on npm. It can be installed with the following command:
```
npm install react-fullscreen-html --save
```
react-fullscreen-html is available on yarn as well. It can be installed with the following command:
```
yarn add react-fullscreen-html
```
## 💡 Usage
### 🎀 Basic
```jsx
import React from 'react';
import { Fullscreen, useFullscreen } from "react-fullscreen-html";
function App() {
const screen = useFullscreen();
return (
Enter fullscreen
Any fullscreen content here
);
}
export default App;
```
### 🎀 Advanced
```jsx
import React, {useCallback} from 'react';
import { Fullscreen, useFullscreen } from "react-fullscreen-html";
function App() {
const screen1 = useFullscreen();
const screen2 = useFullscreen();
const reportChange = useCallback((state, handle) => {
if (handle === screen1) {
console.log('Screen 1 went to', state, handle);
}
if (handle === screen2) {
console.log('Screen 2 went to', state, handle);
}
}, [screen1, screen2]);
return (
First
Second
First
Exit
Second
Exit
);
};
export default App;
```
## 📚 Documentation
### 📖 useFullscreen
Returned
Type
Description
active
boolean
true if this element is currently full screen.
enter
() => void
Requests this element to go full screen.
exit
>() => void
Requests this element to exit full screen.
### 📖 Fullscreen
Prop
Type
Require
Description
handle
UseFullscreenProps
✔️
Handle that helps operate the full screen state.
onChange
(state: boolean, handle: FullscreenHandle) => void
❌
Optional callback that gets called when this screen changes state.
## 💖 Wrap Up
If you think any of the `react-fullscreen-html` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
## 🌟 Contribution
We'd love to have your helping hand on contributions to `react-fullscreen-html` by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
## ⚖️ License
The MIT License [](https://opensource.org/licenses/MIT)