# React User Agent
## Install
npm
```shell
npm i --save react-useragent
```
or yarn
```shell
yarn add react-useragent
```
## Importing
### ES6
```javascript
import { UserAgent } from "react-useragent";
```
### ES5 (CommonJS)
```javascript
const { UserAgent } = require("react-useragent");
```
### ES5 (UMD Build)
```html
```
```javascript
var UserAgent = ReactUserAgent.UserAgent;
```
## Usage
### Children Function
```javascript
import React, { Component } from 'react';
import { UserAgent } from 'react-useragent';
class App extends Component {
render() {
{({ ua }) => {
return ua.mobile ? : >;
}}
}
}
export default App;
```
### Render Prop
```javascript
import React, { Component } from 'react';
import { UserAgent } from 'react-useragent';
class App extends Component {
render() {
{
return ua.mobile ? : >;
}} />
}
}
export default App;
```
### HOC
```javascript
import React, { Component } from "react";
import { withUserAgent } from "react-useragent";
class App extends Component {
render() {
{this.props.ua.mobile ? : }
;
}
}
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.
```json
{
"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
}
}
```