0

Estoy aprendiendo a programar en React y usar Material-UI, quiero realizar algo con el componente Typography, que dependiendo si el dispositivo que esta siendo utilizado, se muestre este o no. Es decir, si estaría en una computadora este se muestre, pero en un celular no. Les muestro mas o menos el componente (solo una parte porque es bastante grande)

return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          {/* Botón Menu con panel lateral */}
          <React.Fragment key={anchor}>
            <IconButton onClick={toggleDrawer(anchor, true)} color="inherit" >
              <MenuIcon  />
            </IconButton>
            <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
              {list(anchor)}
            </Drawer>
          </React.Fragment>
          
          {/* Nombre */}
          <Typography align='center' className={classes.title}>{titulo}</Typography>

          {/* Icono carrito */}
          <IconButton color="inherit" >
            <ShoppingCartIcon />
          </IconButton>

        </Toolbar>
      </AppBar>
      <div className={classes.offset}></div>
    </div>
  );

Ese Typography que tiene el comentario de Nombre, no se como hacer para que desaparezca, yo pensaba hacerlo con un operador ternario pero no me doy cuenta bien como hacerlo.

Gracias!

1 respuesta 1

2

creo que te podría funcionar y sería sencillo comprobando desde una función y retornando el <Typography /> simplemente cuando NO sea un dispositivo móvil.

const whenNotMobileDevice = (titulo, claseTitulo) => {
    if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        return <Typography align='center' className={claseTitulo}>{titulo}</Typography>
    }
}

Y llamar a la función dentro del bloque de código que muestras:

{/* Nombre */}
{whenNotMobileDevice(titulo, classes.title)}

fuente: https://dev.to/timhuang/a-simple-way-to-detect-if-browser-is-on-a-mobile-device-with-javascript-44j3

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.