The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
- Compatible with both JavaScript and TypeScript
- Compatible with both Desktop and Mobile browsers
- Compatible with all browsers
- No dependency
- Easy to use
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
import React from 'react';
import { Fullscreen, useFullscreen } from "react-fullscreen-html";
function App() {
const screen = useFullscreen();
return (
<div>
<button onClick={screen.enter}>
Enter fullscreen
</button>
<Fullscreen handle={screen}>
Any fullscreen content here
</Fullscreen>
</div>
);
}
export default App;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 (
<div>
<button onClick={screen1.enter}>
First
</button>
<button onClick={screen2.enter}>
Second
</button>
<Fullscreen handle={screen1} onChange={reportChange}>
<div className="full-screenable-node" style={{background: "red"}}>
First
<button onClick={screen1.exit}>
Exit
</button>
</div>
</Fullscreen>
<Fullscreen handle={screen2} onChange={reportChange}>
<div className="full-screenable-node" style={{background: "green"}}>
Second
<button onClick={screen2.exit}>
Exit
</button>
</div>
</Fullscreen>
</div>
);
};
export default App;| 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. |
| 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. |
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.
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
The MIT License
