https://github.com/jonstuebe/react-useragent

Higher order component to add user agent information to your react components
https://github.com/jonstuebe/react-useragent

hoc javascript react reactjs useragent

Last synced: about 1 month ago
JSON representation

Higher order component to add user agent information to your react components

• Host: GitHub
• URL: https://github.com/jonstuebe/react-useragent
• Owner: jonstuebe
• Created: 2017-04-24T16:13:12.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-02T18:18:18.000Z (over 5 years ago)
• Last Synced: 2024-05-09T08:21:39.039Z (about 2 months ago)
• Topics: hoc, javascript, react, reactjs, useragent
• Language: JavaScript
• Size: 99.6 KB
• Stars: 14
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-render-props - react-useragent
• awesome-react-render-props - react-useragent

README

        
# 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

  }

}

```