Wondering what’s next for npm?Check out our public roadmap! »

    react-device-detect
    TypeScript icon, indicating that this package has built-in type declarations

    1.17.0 • Public • Published

    react-device-detect

    npm

    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:

    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>

    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

    Install

    npm i react-device-detect

    DownloadsWeekly Downloads

    241,752

    Version

    1.17.0

    License

    MIT

    Unpacked Size

    55.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar