duskload / react-device-detect Goto Github PK
View Code? Open in Web Editor NEWDetect device, and render view according to detected device type.
License: MIT License
Detect device, and render view according to detected device type.
License: MIT License
I need to use this to show some pages on IE11+ just how can i access that ? or its not possible yet ?
Hello, Im not sure if this is a issue with react-device-detect, cypress, or my own fault, but I have this line in my cypress spec at the very top,
Cypress.config('user-agent', 'mobile')
it does not trigger isMobile when I run cypress. I was able to get cypress to trigger isMobile with a cypress.json config file at root of project, with contents of
{
"chromeWebSecurity": false,
"baseUrl": "http://localhost:3000",
"userAgent": "Mozilla/5.0 (Linux; Android 6.0.1; SM-G532G Build/MMB29T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.83 Mobile Safari/537.36"
}
but doing it like this is lame because it makes ALL cypress tests run as mobile, when I really want to be able to do it in each test file like the above.. ty in advance!
Is there a way to differentiate MobileSafari and In-App Mobile Safari?
While they are supposed to be the same browser, In-App Mobile Safari currently doesn't support WebRTC so I'm needing to re-direct users to use the actual Mobile Safari app.
isBrowser
is declared two times in typecsript interface
So my compiler is unable to build:
Cannot redeclare block-scoped variable isBrowser
Thank you
I am getting includes is not a function on IE due to this module. How can I use CommonJS version of it or atleast make it compatible to IE? I am using NextJS v8.1.0 and react-device-detect v1.6.2.
I am using Apache Cordova (in short my custom web browser) with user agent (User-Agent: "this is my mobile app"
) and problem is that import {isMobile} from 'react-device-detect'
returns false for my app (it`s running on android).
Is there any way how to push my UserAgent into library list? It should return true
because its running on adroid - but with unknown user agent... :-)
Any tips?
In worst case I can use if (isMobile || getUA() ===
this is my mobile app)...
Thanks
When testing a device in a hybrid app via xcode the deviceType returns as browser even though it is a native ios app.
I tested with ipad 2018, if the code is <mobileView><img src="imageA"/></mobileView> <tabletView><img src="imageB"></tabletView>
, on ipad it will show both imageA and imageB.
./node_modules/react-device-detect/main.js Cannot find module: 'ua-parser-js/dist/ua-parser.min'. Make sure this package is installed
I am getting this issue when I am running my pipeline and it just started today right after this commit-
I am not sure what would have caused it in the commit as there were no changes to the package.json other than the version
I see there is a close issue about detection with IE and there was an update for that, But I'm not sure if there is something more I need. I have the same behavior with IE11. String is showing IE, but the Boolean display false.
This is the version I have "react-device-detect": "^1.4.5"
Would be nice if you could add detection and views for smart-tv's. Thanks
Since iOS 13 browser is declared as a desktop browser, isTablet and even isIOS do not work properly on iPad.
This guy use a different algorithm to detect iPad https://stackoverflow.com/questions/58019463/how-to-detect-device-name-in-safari-on-ios-13-while-it-doesnt-show-the-correct .
would it be possible to implement this for isTablet
?
Thank you
Hi,
I don't see a way to pass a custom user agent string into this library but it seems like it should be straightforward since you are using UA Parser. Allowing for this would enable use in SSR.
See https://github.com/faisalman/ua-parser-js#using-nodejs.
If you are open to this idea, I would be happy to help with a PR.
Best,
Jon
I would suggest to add ...this.props
to the WrappedComponent used in withOrientationChange.js
or at least add {props.children}
as content.
<BrowserView device={isBrowser}>
<h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView device={isMobile}>
<h1> This is rendered only on mobile </h1>
</MobileView>
Why cant BrowserView
/any view component check whether the device is browser / its respetive device internally so that the usage will be simple.
<BrowserView>
<h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
<h1> This is rendered only on mobile </h1>
</MobileView>
When I start my app which use lib in latest version (1.11.14), I found error navigator is not defined
. I think the problem is in main.js
file.
var getNavigatorInstance = function getNavigatorInstance() { if (typeof window !== 'undefined') { if (window.navigator || navigator) { return window.navigator || navigator; } }
I try to remove it from node_modules then it's work. But I'm not sure we can remove it from code or not. Can anybody confirm it?
As shown in the attached screenshot I've tested on two Kindle Fire HD tablets and both have the same outcome. isMobile/isTablet is false as the device type comes back as browser/desktop. I also went to https://faisalman.github.io/ua-parser-js/ on both Kindle fire's and they are identified as desktop/browser.
I'm thinking about checking for the Silk user agent on top of isMobile in my application for the time being, or os of Android... not sure if that will affect some Chrome books?
FYI, if you just test with the emulation in chrome dev tools for the Kindle Fire HD you will get the desired isMobile/Tablet: true, device is Amazon... you have to test on an actual device, and the BrowserStack emulator, if you can get it to load, will give you browser generic device/desktop as well on ua-parser-js.
Hi
Thanks for your module.
This is a small and useful module for the React frontend.
But I can't use this module for server-side rendering.
I think if we can use this module for server-side rendering, this module will be more useful and grateful.
we can analyze request user agent string on the server-side.
I think internal functions will be exported to analyze user agent in this module.
what about your thoughts?
Or can I use this module for server-side rendering now?
I'm using react-device-detect in next.js (react SSR) but it doesn't work.
There are some closed issues about SSR in the repo but I think it isn't implemented yet.
next version: 9.0.5
react-device-detect: 1.9.10
I understand the package works and detect the screen when the page is loading but is there a way to also make the detection upon screen resize like when you use chrome inspect to change screen responsiveness. I have been trying to fix this async but don't seems to get maybe a little help would do
It appears that on IE11 the variable isIE is set to false.
I tried this page on Chrome and Mobile and the respective variables changed accordingly, but not for IE11.
Am I doing something wrong?
Thanks in advance for your replies. Have a nice day โบ
Hi,
I was checking the document, but nowhere mentioned about detecting the Mac.
Do you support this feature?
Hi,
This library was working with gatsbyjs (1.9.10) until the last version (1.11.11). I am getting now this error:
failed Building static HTML for pages - 5.562s
ERROR #95312
"navigator" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html
416 |
417 | var getIOS13 = function getIOS13() {
418 | return (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window.MSStream;
| ^
419 | };
420 |
421 | var getIPad13 = function getIPad13() {
WebpackError: ReferenceError: navigator is not defined
main.js:418 getIOS13
node_modules/react-device-detect/main.js:418:1
main.js:507 Object../node_modules/react-device-detect/main.js
node_modules/react-device-detect/main.js:507:1
As a developer I want to be able to understand what was changed with new releases available through npm so that I can understand what has changed and whether I need to update. It is also hlpful to understand what kinds of breaking changes may have been introduced.
This can be achieved through either tagged releases or a changelog.
This package has many useful properties but unfortunately there is no way to detect the orientation of the mobile device.
Hi! I love your proyect, it's really useful and i grateful.
I use Google Device Toolbar when i need to test a responsive web page, so this tool change UA data in the air, and doesn't reload the web page when i change device.
In this context (and thinking about using "react-device-detect" as a way to detect when a page is resized) i need a way to update UA data of "react-device-detect", without reload page.
I think you need to add Desktop View.
But for now, do you have any idea to handle on desktop view ?
because when i use BrowserView then in MobileView and tablet TabletView doesnt rendered.
deviceType
doesn't seem to return anything
I would like to cypress to test my views, it can set viewport size easily and its supposed to be able to set useragent but dosent seem to really work. the viewport size is however changed, can I trigger ismobile to be true based on viewport size?
I've just installed this app, and put next code into the test component
<BrowserView>
<h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
<h1> This is rendered only on mobile </h1>
</MobileView>
As result I have typescript compilation error:
JSX element type 'BrowserView' is not a constructor function for JSX elements.
Type 'BrowserView' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. TS2605
I've tried to install @types/react-device-detect
but there is no package found in npm repo
Module '"react-device-detect"' has no exported member 'deviceDetect'. I need this function exported for typescript.
we are getting an error because the existence of window object is not validated
Hi ,
There's no way to distinguish Chrome from Brave, both return same browser name.
Saw some articles about finger printing brave , so it hides on chrome name.
Is there a way to see the difference ?
react-device-detect/src/components/helpers/selectors.js
Lines 51 to 52 in 6cb3670
The getBrowserFullVersion should return the version, not just major. And vice versa.
Hi, I currently have text animations on my website (showing only when the user scrolls to the element). However, if the content is being accessed by a crawler, I'd like to disable these animations for SEO purposes. I'm not sure if that is possible with this library and whether using isBrowser
is enough? Any advice?
How could I utilize browserName
to return the browser being used?
there is not fully support for typescript. for example isChrome, browserVersion etc.
throw typescript error with latest packages below;
ERROR in ..../node_modules/react-device-detect/index.d.ts ERROR in .../node_modules/react-device-detect/index.d.ts(75,53): TS2707: Generic type 'ReactComponentElement<T, P>' requires between 1 and 2 type arguments.
it could be ok just adding <any>
to line 75 of index.d.ts
Hi!
Devices Samsung Note 3 (phone) and Lenovo Idea Tab3 - 7inch tablet are not properly identified on different web browsers :
Android Phone:
<Opera (Mini)> Samsung Note 3 was as expected.
Samsung Note 3 was not as expected. it was not detected as a phone.
Android Tablet:
<Chrome (default)>Lenovo Idea Tab3 - 7inch was not as expected. it was detected as a phone.
Lenovo Idea Tab3 - 7inch was as expected. it was not detected as a phone.
<Opera (Normal)>Lenovo Idea Tab3 - 7inch was not as expected. it was detected as a phone.
If needed i can provide additional logs.
Is there any chance to improve this?
Thanks in advance!
Instead of returning the object with the value key of the device set to true, please create a function that would just return the device type as a string.
ex: returnDeviceType();
-> 'isMobile' or Mobile of whatever.
In dependencies there is react 16, and in peerDependencies react 14, 15 or 16. This is a potential problem and could pack two versions of react if people don't use react 16 in their app, no ?
Hello, I developed an React application using the this package.
While writing the test code but my test didnt coverage the code because isMobile = false. How do I mock isMobile.
my test code
describe('<Header/>', () => {
it('renders without crashing.', () => {
const wrapper = mount(
<MemoryRouter>
<Header />
</MemoryRouter>,
);
expect(wrapper.find(Header)).toHaveLength(1);
});
});
From Readme.md
if (isMobile) {
return <div> This content is unavailable on mobile</div>
}
Hi! I saw a closed issue that was about implementing SSR detection: is there any updates on this? Thanks! :)
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.