Estoy tratando de crear un gancho personalizado que me devuelva el nombre del navegador del usuario. Es mi primer intento de crear un enlace personalizado para detectar el navegador. Estoy configurando el estado en el gancho con el nombre de los navegadores y devolviendo el valor del estado que pensé que se reflejaría en el componente donde estoy usando el gancho. Pero solo devuelve la primera letra del texto.
¿Puede alguien aquí saber qué estoy haciendo mal aquí?
A continuación se muestra mi código para detectar el nombre de los navegadores
usarDetectBrowser()
import React from "react"; export default function useDetectBrowser() { var sBrowser, sUsrAg = navigator.userAgent; const [ browserName, setBrowserName ] = React.useState(""); React.useEffect(() => { if (sUsrAg.indexOf("Firefox") > -1) { sBrowser = "Mozilla Firefox"; // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0" } else if (sUsrAg.indexOf("SamsungBrowser") > -1) { sBrowser = "Samsung Internet"; // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36 } else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) { sBrowser = "Opera"; // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106" } else if (sUsrAg.indexOf("Trident") > -1) { sBrowser = "Microsoft Internet Explorer"; // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko" } else if (sUsrAg.indexOf("Edge") > -1) { sBrowser = "Microsoft Edge"; // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299" } else if (sUsrAg.indexOf("Chrome") > -1) { sBrowser = "Google Chrome or Chromium"; // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36" } else if (sUsrAg.indexOf("Safari") > -1) { sBrowser = "Apple Safari"; // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306" } else { sBrowser = "unknown"; } setBrowserName(sBrowser); }, []); return browserName }// Uso:
const [ browserName, setBrowserName ] = useDetectBrowser(); console.log(browserName);Tu gancho se ve bien. El único error es el uso del gancho: el tipo de devolución es una cadena, por lo que actualmente tiene una asignación similar a:
const [ browserName /* "C" */, setBrowserName /* "h" */ ] = 'Chrome';extrayendo la primera letra, para arreglar solo cambia a
const browserName = useDetectBrowser();