duskload / React Device Detect
Licence: mit
Detect device, and render view according to detected device type.
Stars: ✭ 1,145
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Device Detect
Mobile Device Detect
Detect mobile device and its type.
Stars: ✭ 132 (-88.47%)
Mutual labels: detect, useragent, mobile, device
Device Detector Js
A precise user agent parser and device detector written in TypeScript
Stars: ✭ 193 (-83.14%)
Mutual labels: user-agent, mobile, device
Crawler Detect
🕷 CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent
Stars: ✭ 1,549 (+35.28%)
Mutual labels: detect, user-agent
Apple Device Model List
All Apple devices model name list. 通过内部编号判断 iOS 设备型号。
Stars: ✭ 149 (-86.99%)
Mutual labels: detect, device
browserslist-generator
A library that makes generating and validating Browserslists a breeze!
Stars: ✭ 77 (-93.28%)
Mutual labels: user-agent, useragent
useragent-generator
Easily generate correct user-agent strings for popular browsers
Stars: ✭ 62 (-94.59%)
Mutual labels: user-agent, useragent
Ng Device Detector
Angular module to detect OS / Browser / Device
Stars: ✭ 243 (-78.78%)
Mutual labels: user-agent, useragent
crawlerdetect
Golang module to detect bots and crawlers via the user agent
Stars: ✭ 22 (-98.08%)
Mutual labels: user-agent, detect
bots-zoo
No description or website provided.
Stars: ✭ 59 (-94.85%)
Mutual labels: user-agent, useragent
Browser.php
A PHP Class to detect a user's Browser. This encapsulation provides a breakdown of the browser and the version of the browser using the browser's user-agent string. This is not a guaranteed solution but provides an overall accurate way to detect what browser a user is using.
Stars: ✭ 546 (-52.31%)
Mutual labels: user-agent, useragent
Bugz
🐛 Composable User Agent Detection using Ramda
Stars: ✭ 15 (-98.69%)
Mutual labels: user-agent, device
uainfer
Infer the user agent from its User Agent string
Stars: ✭ 21 (-98.17%)
Mutual labels: user-agent, useragent
User agent
HTTP User Agent parser for the Go programming language.
Stars: ✭ 578 (-49.52%)
Mutual labels: user-agent, useragent
Parser Javascript
Browser sniffing gone too far — A useragent parser library for JavaScript
Stars: ✭ 66 (-94.24%)
Mutual labels: user-agent, device
Connectivity
Detect if the network is up (do we have connectivity?)
Stars: ✭ 58 (-94.93%)
Mutual labels: detect
Wa status saver
A whatsApp status saver/downloader with flutter
Stars: ✭ 66 (-94.24%)
Mutual labels: mobile
Carpoolear
The open source Vue.js frontend (mobile and cordova app) for the argentinian carpooling application: Carpoolear
Stars: ✭ 59 (-94.85%)
Mutual labels: mobile
Responsivedevices.css
Responsive CSS Device frames for your landing pages
Stars: ✭ 59 (-94.85%)
Mutual labels: device
react-device-detect
Detect device, and render view according to the detected device type.
Installation
To install, you can use npm or yarn:
npm install react-device-detect --save
or
yarn add react-device-detect
Usage
Example:
import {
BrowserView,
MobileView,
isBrowser,
isMobile
} from "react-device-detect";
<BrowserView>
<h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
<h1> This is rendered only on mobile </h1>
</MobileView>
if you don't need a view, you can use isMobile
for conditional rendering
import {isMobile} from 'react-device-detect';
renderContent = () => {
if (isMobile) {
return <div> This content is unavailable on mobile</div>
}
return <div> ...content </div>
}
render() {
return this.renderContent();
}
If you want to leave a message to a specific browser (e.g IE), you can use isIE
selector
import {isIE} from 'react-device-detect';
render() {
if (isIE) return <div> IE is not supported. Download Chrome/Opera/Firefox </div>
return (
<div>...content</div>
)
}
If you want to render a view on a specific device and with a specific condition:
import { browserName, CustomView } from 'react-device-detect';
render() {
return (
<CustomView condition={browserName === "Chrome"}>
<div>...content</div>
</CustomView>
)
}
Style the view
You can style view component by passing class to viewClassName
prop
<BrowserView viewClassName='custom-class'>
<p> View content </p>
</BrowserView>
or you can pass inline styles to style
prop
const styles = {
background: "red",
fontSize: "24px",
lineHeight: "2"
};
<BrowserView style={styles}>
<p> View content</p>
</BrowserView>
Selectors and views
Selectors
prop | type | description |
---|---|---|
isMobile | bool | returns true if device type is mobile or tablet
|
isMobileOnly | bool | returns true if device type is mobile
|
isTablet | bool | returns true if device type is tablet
|
isBrowser (legacy) | bool | returns true if device type is browser (better to use isDesktop instead) |
isDesktop | bool | returns true if device type is browser (an alias of the isBrowser type |
isSmartTV | bool | returns true if device type is smarttv
|
isWearable | bool | returns true if device type is wearable
|
isConsole | bool | returns true if device type is console
|
isAndroid | bool | returns true if os type is Android
|
isWinPhone | bool | returns true if os type is Windows Phone
|
isIOS | bool | returns true if os type is iOS
|
isChrome | bool | returns true if browser is Chrome
|
isFirefox | bool | returns true if browser is Firefox
|
isSafari | bool | returns true if browser is Safari
|
isOpera | bool | returns true if browser is Opera
|
isIE | bool | returns true if browser is Internet Explorer
|
isEdge | bool | returns true if browser is Edge or Edge Chromium
|
isYandex | bool | returns true if browser is Yandex
|
isChromium | bool | returns true if browser is Chromium
|
isMobileSafari | bool | returns true if browser is Mobile Safari
|
isSamsungBrowser | bool | returns true if browser is Samsung Browser
|
osVersion | string | returns os version (e.g 7 for Windows or 6 for Android ) |
osName | string | returns os name (e.g Windows , Android ) |
fullBrowserVersion | string | returns full browser version (e.g 65.0.3325.181 for Chrome ) |
browserVersion | string | returns browser major version (e.g 65 in Chrome or 9 in IE ) |
browserName | string | returns browser name |
mobileVendor | string | returns mobile device vendor (e.g LG , iPhone etc) |
mobileModel | string | returns mobile device model (e.g Nexus 5 ) |
engineName | string | returns browser engine name (e.g Gecko for FF or WebKit for Chrome) |
engineVersion | string | returns engine version |
getUA | string | returns user agent |
deviceType | string | returns device type (e.g mobile or tablet ) |
isIOS13 | boolean | returns true/false if device is running on iOS13 |
isIPhone13 | boolean | returns true/false if device is iPhone and running on iOS13 |
isIPad13 | boolean | returns true/false if device is iPad and running on iOS13 |
isIPod13 | boolean | returns true/false if device is iPod and running on iOS13 |
isElectron | boolean | returns true/false if running on Electron
|
isEdgeChromium | boolean | returns true/false if browser is Edge Chromium
|
isLegacyEdge | boolean | returns true if browser is Edge
|
isWindows | boolean | returns true/false if os is Windows
|
isMacOs | boolean | returns true/false if os is Mac OS
|
deviceDetect | boolean | return data object which includes all data about device (e.g version, engine, os etc.) |
OsTypes | object | return data object with os types |
BrowserTypes | object | return data object with browser types |
Views
Available views:
- MobileView
- BrowserView
- TabletView
- AndroidView
- IOSView
- IEView
- WinPhoneView
- MobileOnlyView
- SmartTVView
- ConsoleView
- WearableView
- CustomView -- has
condition
prop which takes any expression which results into boolean (e.g browserName === 'Chrome')
Each view accepts three props:
-
viewClassName
- to style the view -
style
- to add inline styles to view -
children
- to pass children to view -
renderWithFragment
- render withReact.Fragment
instead of<div>
withOrientationChange
A HOC for getting isLandscape
and isPortrait
props for mobile
import { withOrientationChange } from 'react-device-detect'
let App = props => {
const { isLandscape, isPortrait } = props
if (isLandscape) {
return <div>The device is in Landscape mode</div>
}
if (isPortrait) {
return <div>The device is in Portrait mode</div>
}
}
App = withOrientationChange(App)
export { App }
Testing
import * as rdd from 'react-device-detect';
rdd.isMobile = true;
// use in tests
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].