JSPM

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

Any view component has one required prop device to which you pass prop which identifies if view should be rendered.

Example:

import { BrowserView, MobileView, isBrowser, isMobile } from "react-device-detect";

<BrowserView device={isBrowser}>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView device={isMobile}>
    <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} device={isBrowser}>
    <p> View content</p>
</BrowserView>

Selectors and views

Selectors

Views

Currently available views:

Each view (except CustomView) takes four props:

1. device - takes device prop to render the view
2. viewClassName - to style the view
3. style - to add inline styles to view
4. children - to pass children to view

License

MIT