Device model info is empty in response.

[deepakgptindia1]

⚠️ Missing/incorrect detections should be reported at https://github.com/matomo-org/device-detector/issues instead of this repo.

Hi team,

I tested this library on multiple Android devices, created a React app, and hosted it. However, I am not able to see the "device.model" info in the response.

Application URL: https://deepakgptindia1.github.io/device-detector-js/

Here is the sample response:

{
"client": {
"type": "browser",
"name": "Chrome Mobile",
"version": "126.0",
"engine": "Blink",
"engineVersion": ""
},
"os": {
"name": "Android",
"version": "10.0",
"platform": ""
},
"device": {
"type": "smartphone",
"brand": "",
"model": ""
},
"bot": null
}

The same is true for the URL provided on npm, i.e., https://lx3rzx16x9.codesandbox.io/.

[deepakgptindia1]

Here is the code that I have written :

import { useEffect, useState } from "react";
import "./App.css";
import DeviceDetector from "device-detector-js";

const deviceDetector = new DeviceDetector();

function App() {
  const [userAgent, setUserAgent] = useState(undefined);
  const [device, setDevice] = useState(undefined);

  useEffect(() => {
    if (window.location.hash) {
      const userAgent = decodeURIComponent(window.location.hash.substr(1));

      return parseUserAgent(userAgent);
    }

    parseUserAgent(navigator.userAgent);
  }, []);

  const parseUserAgent = (userAgentVal) => {
    if (userAgentVal.trim() === (userAgent || "").trim()) {
      return setUserAgent({ userAgent });
    }

    const device = deviceDetector.parse(userAgentVal);

    setUserAgent(userAgentVal);
    setDevice(device);
  };

  return (
    <div className="App">
      <h1>Device Details</h1>

      {JSON.stringify(device)}
    </div>
  );
}

export default App;