react-useragent's Introduction

React User Agent

Install

npm

npm i --save react-useragent

or yarn

yarn add react-useragent

Importing

ES6

import { UserAgent } from "react-useragent";

ES5 (CommonJS)

const { UserAgent } = require("react-useragent");

ES5 (UMD Build)

<head>
  <!-- make sure and also include react and react-dom -->
  <script src="https://unpkg.com/[email protected]/mobile-detect.js" />
  <script src="https://unpkg.com/[email protected]/lib/index.js" />
</head>

var UserAgent = ReactUserAgent.UserAgent;

Usage

Children Function

import React, { Component } from 'react';
import { UserAgent } from 'react-useragent';

class App extends Component {
  render() {
    <div>
      <UserAgent>
        {({ ua }) => {
          return ua.mobile ? <input type="date" /> : <input type="text" />>;
        }}
      </UserAgent>
    </div>
  }
}

export default App;

Render Prop

import React, { Component } from 'react';
import { UserAgent } from 'react-useragent';

class App extends Component {
  render() {
    <div>
      <UserAgent render={({ ua }) => {
        return ua.mobile ? <input type="date" /> : <input type="text" />>;
      }} />
    </div>
  }
}

export default App;

HOC

import React, { Component } from "react";
import { withUserAgent } from "react-useragent";

class App extends Component {
  render() {
    <div>
      {this.props.ua.mobile ? <input type="date" /> : <input type="text" />}
    </div>;
  }
}

export default withUserAgent(App);

API

This utility uses mobile-detect for user agent parsing. The following object is exposed to the component through props/args (depending on the usage). The key "md" is the actual mobile-detect constructor and is available to call any mobile-detect methods that are not included by default.

{
  "mobile": null,
  "phone": null,
  "tablet": null,
  "os": null,
  "md": {
    "ua":
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36",
    "_cache": {
      "phone": null,
      "tablet": null,
      "mobile": null,
      "os": null
    },
    "maxPhoneWidth": 600
  }
}

react-useragent's People