react-useragent - npm Package Compare versions

Comparing version 0.4.4 to 1.0.0

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,2 +6,3 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.UserAgent = exports.withUserAgent = undefined;
 
@@ -12,7 +13,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _mobileDetect = require('mobile-detect');
+var _mobileDetect = require("mobile-detect");
 
@@ -29,3 +30,17 @@ var _mobileDetect2 = _interopRequireDefault(_mobileDetect);
 
-var withUserAgent = function withUserAgent(ComposedComponent) {
+var getUserAgent = function getUserAgent() {
+  var md = new _mobileDetect2.default(window.navigator.userAgent);
+  var state = {
+    ua: {
+      mobile: md.mobile(),
+      phone: md.phone(),
+      tablet: md.tablet(),
+      os: md.os(),
+      md: md
+    }
+  };
+  return state;
+};
+
+var withUserAgent = exports.withUserAgent = function withUserAgent(ComposedComponent) {
   return function (_Component) {
@@ -39,13 +54,3 @@ _inherits(_class, _Component);
 
-      var md = new _mobileDetect2.default(window.navigator.userAgent);
-
-      _this.state = {
-        ua: {
-          mobile: md.mobile(),
-          phone: md.phone(),
-          tablet: md.tablet(),
-          os: md.os(),
-          md: md
-        }
-      };
+      _this.state = getUserAgent();
       return _this;
@@ -55,3 +60,3 @@ }
     _createClass(_class, [{
-      key: 'render',
+      key: "render",
       value: function render() {
@@ -66,2 +71,33 @@ return _react2.default.createElement(ComposedComponent, _extends({ ua: this.state.ua }, this.props));
 
-exports.default = withUserAgent;
+var UserAgent = exports.UserAgent = function (_Component2) {
+  _inherits(UserAgent, _Component2);
+
+  function UserAgent(props) {
+    _classCallCheck(this, UserAgent);
+
+    var _this2 = _possibleConstructorReturn(this, (UserAgent.__proto__ || Object.getPrototypeOf(UserAgent)).call(this, props));
+
+    _this2.state = getUserAgent();
+    return _this2;
+  }
+
+  _createClass(UserAgent, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          render = _props.render;
+
+      if (children) {
+        return children(this.state);
+      }
+      if (render) {
+        return render(this.state);
+      }
+      console.error("Component UserAgent:", "no children or render prop are present");
+      return null;
+    }
+  }]);
+
+  return UserAgent;
+}(_react.Component);

package.json

 {
   "name": "react-useragent",
-  "version": "0.4.4",
-  "description": "Higher order component to add user agent information to your react components",
+  "version": "1.0.0",
+  "description": "Utility to add user agent information to your react components",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "author": "Jon Stuebe",

README.md

@@ -11,5 +11,7 @@ # React User Agent
 
+### Children Function
+
 ```
-import React, { Component } from 'react'
-import withUserAgent from 'react-useragent';
+import React, { Component } from 'react';
+import { UserAgent } from 'react-useragent';
 
@@ -19,2 +21,42 @@ class App extends Component {
     <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 ? (
@@ -34,3 +76,3 @@ <input type="date" />
 
-This HOC uses mobile-detect for user agent parsing. The following object is exposed to the component through props. The key "md" is the actual mobile-detect constructor and is available to call any mobile-detect methods that are not included by default as props.
+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.
 
@@ -37,0 +79,0 @@ ```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77553

2.65%

Lines of code

75

74.42%

Number of low quality alerts

0

-100%

Number of lines in readme file

94

80.77%

No dependency changes