Add extra hooks

burnpiro · Oct 2, 2021 · b61f0b1 · b61f0b1
1 parent f56f4cc
commit b61f0b1
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 4 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,5 @@
+misc/**/*
+src/**/*
+
+.idea
+tsconfig.json
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 <p align="center">
 <a href="https://travis-ci.org/faisalman/ua-parser-js"><img src="https://travis-ci.org/faisalman/ua-parser-js.svg?branch=master"></a>
-<a href="https://www.npmjs.com/package/ua-parser-js"><img src="https://img.shields.io/npm/v/ua-parser-js.svg"></a>
+<a href="https://www.npmjs.com/package/use-ua-parser-js"><img src="https://img.shields.io/npm/v/use-ua-parser-js.svg"></a>
 </p>
 
 # useUA React Hook
@@ -58,3 +58,49 @@ const myComponent: FC<Props> = (props) => {
   [...]
 }
 ```
+
+# Other Hooks
+
+### `useDevice(usString?: string)`:
+
+```javascript
+
+import { useDevice } from 'use-ua-parser-js';
+
+const myComponent: FC<Props> = (props) => {
+  const device = useDevice(); //{ model: string, type: string, vendor: string }
+}
+```
+
+### `useBrowser(usString?: string)`:
+
+```javascript
+
+import { useBrowser } from 'use-ua-parser-js';
+
+const myComponent: FC<Props> = (props) => {
+  const browser = useBrowser(); //{ name: string, version: string }
+}
+```
+
+### `useCPU(usString?: string)`:
+
+```javascript
+
+import { useCPU } from 'use-ua-parser-js';
+
+const myComponent: FC<Props> = (props) => {
+  const cpu = useCPU(); //{ architecture: string }
+}
+```
+
+### `useEngine(usString?: string)`:
+
+```javascript
+
+import { useEngine } from 'use-ua-parser-js';
+
+const myComponent: FC<Props> = (props) => {
+  const engine = useEngine(); //{ name: string, version: string }
+}
+```
diff --git a/package.json b/package.json
@@ -3,14 +3,16 @@
   "version": "1.0.0",
   "description": "React Hook for UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data.",
   "main": "dist/index.js",
-  "module": "use-ua-parser-js.esm.js",
+  "module": "dist/use-ua-parser-js.esm.js",
   "typings": "dist/index.d.ts",
   "scripts": {
     "build": "tsdx build"
   },
   "keywords": [
     "user-agent",
     "device",
+    "device-detector",
+    "browser-detector",
     "parser",
     "ua",
     "react-hooks",

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,10 +3,11 @@ import * as UAParser from 'ua-parser-js';
 
 type IUseUAReturn = Omit<UAParser.IResult, 'ua'>;
 
+const uaParser = new UAParser.UAParser();
+
 function useUA(uastring = window.navigator.userAgent) {
   return React.useMemo<IUseUAReturn | null>(() => {
     try {
-      const uaParser = new UAParser.UAParser();
       uaParser.setUA(uastring);
       return {
         os: uaParser.getOS(),
@@ -21,4 +22,48 @@ function useUA(uastring = window.navigator.userAgent) {
   }, [uastring]);
 }
 
-export { useUA };
+function useDevice(uastring = window.navigator.userAgent) {
+  return React.useMemo<UAParser.IResult['device'] | null>(() => {
+    try {
+      uaParser.setUA(uastring);
+      return uaParser.getDevice();
+    } catch (err) {
+      return null
+    }
+  }, [uastring]);
+}
+
+function useBrowser(uastring = window.navigator.userAgent) {
+  return React.useMemo<UAParser.IResult['browser'] | null>(() => {
+    try {
+      uaParser.setUA(uastring);
+      return uaParser.getBrowser();
+    } catch (err) {
+      return null
+    }
+  }, [uastring]);
+}
+
+function useCPU(uastring = window.navigator.userAgent) {
+  return React.useMemo<UAParser.IResult['cpu'] | null>(() => {
+    try {
+      uaParser.setUA(uastring);
+      return uaParser.getCPU();
+    } catch (err) {
+      return null
+    }
+  }, [uastring]);
+}
+
+function useEngine(uastring = window.navigator.userAgent) {
+  return React.useMemo<UAParser.IResult['engine'] | null>(() => {
+    try {
+      uaParser.setUA(uastring);
+      return uaParser.getEngine();
+    } catch (err) {
+      return null
+    }
+  }, [uastring]);
+}
+
+export { useUA, useDevice, useBrowser, useCPU, useEngine };