react-device-detect

Detect device, and render view according to 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 wan't to leave a message to 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 specific device and with specific condition:

import { browserName, CustomView } from 'react-device-detect';

render() {
    return (
        <CustomView condition={browserName === "Chrome"}>
            <div>...content</div>
        </CustomView>
    )
}

Style the view

Yoa 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 | bool | returns true if device type is browser | | 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 | | 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 | | 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 | | deviceDetect | function | return data object which includes all data about device (e.g version, engine, os etc.) |

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:

1. viewClassName - to style the view
2. style - to add inline styles to view
3. children - to pass children to view
4. renderWithFragment - render with React.Fragment instead of <div>

License

MIT