ggingell / react-fullscreenable Goto Github PK
View Code? Open in Web Editor NEWReact higher order component that provides fullscreen API to the enhanced component
React higher order component that provides fullscreen API to the enhanced component
Just wanted to state thank you for this project.
I am running into an issue where if I press escape immediately after pressing a button that is hooked to "toggleFullscreen" the component still believes the fullscreen is active. Which for whatever reason will not allow you to toggleFullscreen again.
I'm trying to build a mobile react web app and it won't go into full screen on my mobile phone's chrome or safari browser.
Hi @ggingell, I noticed that react-fullscreen
and react-fullscreen-crossbrowser
both use fscreen
for better cross-browser compatibility.
So, I was wondering if this library also needs to incorporate it for better support -
https://github.com/rafrex/fscreen
Thank you!
This is with Firefox 58.0b11.
Hi @ggingell! Firstly, thank you for putting out this work, I know this is brand new! I
I just tried integrating it with my work (on an universal app) and ran into the following issues:
error given was: ReferenceError: document is not defined
[1] at Function.available (node_modules/fullscreen/index.js:10:17)
[1] at new Fullscreenable (node_modules/react-fullscreenable/lib/index.js:66:56)
Typically, these issues go away by just checking that window
and document
object are not undefined. In this library, given that most of the utility is around that, I imagine putting a check in the constructor and the render method would mitigate this issue.
Thank you again for the library!
When I run npm i react-fullscreenable
, I get this error message
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15 || ^16" from [email protected]
npm ERR! node_modules/react-fullscreenable
npm ERR! react-fullscreenable@"^2.5.1-0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a fll report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Local\npm-cache_logs\2022-07-21T09_19_47_28Z-debug-0.log
Thanks for this great component @ggingell! Here's a small issue I've run into:
I am unable to scroll in fullscreen if the content is overflowing. I can fix it in the developer tools by setting "overflow: auto" on the div that has witdh=100% and height=100%. Is this intentional or am I doing something wrong?
Component now accepts prop isPseudoFullscreen that will immediately enter into pseudoFullscreen when passed as true. This cannot work with native fullscreen since that requires a user-generated event in order for the request to be fulfilled by the browser.
forcePseudoFullscreen will also be passed down if it was passed into the enhanced component.
I would like to force PseudoFullScreen despite Native FullScreen being supported. There's mention of a forcePseudoFullscreen prop, but I'm not entirely sure how to pass it down. Could you provide an example?
It appears the firefox uses psuedo fullscreen? Is this true?
https://developer.mozilla.org/samples/domref/fullscreen.html
Works in both chrome and firefox on my machine.
However, when using react-fullscreenable. It appears only chrome is working. Is this a bug or am I missing something?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.