react-fullscreen-html
The React component allows its children to enter the browser's fullscreen viewing mode using the Fullscreen HTML5.
🎁 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
import React from 'react';import Fullscreen useFullscreen from "react-fullscreen-html"; { const screen = ; return <div> <button => Enter fullscreen </button> <Fullscreen => Any fullscreen content here </Fullscreen> </div> ;} ;
🎀 Advanced
import React useCallback from 'react';import Fullscreen useFullscreen from "react-fullscreen-html"; { const screen1 = ; const screen2 = ; const reportChange = ; return <div> <button => First </button> <button => Second </button> <Fullscreen = => <div ="full-screenable-node" => First <button => Exit </button> </div> </Fullscreen> <Fullscreen = => <div ="full-screenable-node" => Second <button => Exit </button> </div> </Fullscreen> </div> ;}; ;
📚 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