12.11.2024

Renderização Adaptativa em ReactJS para Mobile e Desktop

Resposta Rápida

Para detectar em qual dispositivo sua aplicação está aberta — mobile ou desktop — no ReactJS, utilize window.matchMedia. Aqui está um exemplo de código:

const isMobile = window.matchMedia("(max-width: 768px)").matches;

O valor de isMobile será true para telas com largura inferior a 768px, o que indica dispositivos móveis. O parâmetro max-width pode ser ajustado de acordo com suas necessidades de responsividade. Mais adiante, isMobile ajudará você a personalizar o comportamento da sua aplicação com base no tamanho da tela.

Este método é eficaz para adaptar rapidamente o conteúdo. Se você precisar de uma exploração mais aprofundada sobre adaptação dinâmica no React, sugiro que continue lendo.

Renderização Dinâmica com Hooks do React

Flexibilidade na Redimensão da Janela

Configure os componentes do React para responder a mudanças no tamanho da tela. Isso é especialmente importante quando os usuários giram seus dispositivos móveis ou redimensionam suas janelas de navegador em desktops:

import React, { useState, useEffect } from 'react';

// O hook useDeviceDetect livra você das preocupações sobre o tipo de dispositivo
const useDeviceDetect = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    // Monitore a mudança de tamanho da tela aqui, reagindo instantaneamente a quaisquer alterações
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    // Certifique-se de remover o manipulador para evitar vazamentos de memória
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return { isMobile };
};

export default useDeviceDetect;

Componentes que se Adaptam Instantaneamente a Mudanças no Tamanho da Tela

O hook personalizado useDeviceDetect permite que você acompanhe as mudanças de largura do dispositivo e adapte a renderização do seu componente dinamicamente:

import React from 'react';
import useDeviceDetect from './useDeviceDetect';

// Valorizamos a responsividade de nossos componentes tanto quanto o prazer em um bom café
const MeuComponenteResponsivo = () => {
  const { isMobile } = useDeviceDetect();

  return (
    <div>
      {
        // Escolha entre componentes mobile e desktop com base no tipo de dispositivo
        isMobile ? <MobileComponent /> : <DesktopComponent />
      }
    </div>
  );
};

export default MeuComponenteResponsivo;

Usando Ferramentas para Detecção Precisa de Dispositivos

Consultas de Mídia com "react-responsive"

Para um controle mais elegante, utilize a biblioteca react-responsive, que simplifica a renderização condicional com base em consultas de mídia, semelhante ao CSS:

import { useMediaQuery } from 'react-responsive';

const MeuComponente = () => {
  const isTabletOuMobile = useMediaQuery({ query: '(max-width: 1224px)' });
  const isRetrato = useMediaQuery({ query: '(orientation: portrait)' });

  // Renderização condicional de componentes com base nos dados da consulta de mídia
};

export default MeuComponente;

Informações Detalhadas sobre Dispositivos com "React Device Detect"

Se precisar de informações mais detalhadas sobre o dispositivo, além do tamanho da tela, a biblioteca React Device Detect será útil, fornecendo informações sobre sistemas, navegadores e outras características:

import { BrowserView, MobileView } from 'react-device-detect';

// Dividindo dispositivos móveis e desktops...
const MeuComponente = () => {
  return (
    <>
      <BrowserView>
        {/* DesktopComponent vai aqui para usuários de desktop */}
        <DesktopComponent />
      </BrowserView>
      <MobileView>
        {/* MobileComponent será exibido aqui para usuários móveis */}
        <MobileComponent />
      </MobileView>
    </>
  );
};

export default MeuComponente;

Os componentes BrowserView e MobileView dessa biblioteca melhoram a legibilidade e a estrutura do código.

Visualização

Podemos pensar em usar o ReactJS como escolher entre duas portas dependendo do dispositivo: uma para usuários móveis e outra para desktops.

Entrada do Estabelecimento:
🚪📱: Usuário móvel escolhe um corredor estreito (Design Responsivo)
vs.
🚪💻: Usuário de desktop escolhe uma porta larga (Design de Formato Completo)

ReactJS:
👨‍💼✨ Determinando via User Agent ou tamanho de viewport e selecionando a "entrada" apropriada (UI)

Ideia Principal: O ReactJS utiliza o User-Agent ou o tamanho do viewport para determinar qual interface é apropriada para o usuário.

Ao utilizar os hooks e bibliotecas mencionados acima, você pode garantir máxima conveniência e otimizar a utilização da sua aplicação para os usuários. É importante prestar atenção a aspectos como controle por toque, orientação de tela e suporte a alta resolução.

Uma aplicação bem configurada estará de braços abertos para todos, convidando visitantes como um lugar com portas amplamente abertas.

Recursos Úteis

1. Detecção de Navegador usando o User Agent - HTTP | MDN - Aprenda métodos para detectar o user-agent usando JavaScript.
2. Fundamentos do Design Responsivo | web.dev - Familiarize-se com os princípios essenciais de criação de design web responsivo.
3. react-responsive - npm - Uma biblioteca React que fornece consultas de mídia como um elemento de desenvolvimento.
4. Consultas de Mídia do Design Web Responsivo - Aprofunde seu conhecimento no uso de consultas de mídia CSS para criar interfaces responsivas.
5. JavaScript - Detectando Navegador Móvel - Stack Overflow - Confira códigos para detectar dispositivos móveis.
6. Método Window: matchMedia() - Web API | MDN - Saiba mais sobre window.matchMedia() para verificar consultas de mídia em JavaScript.
7. react-device-detect - npm - Encontre a ferramenta certa para detecção de dispositivos em aplicações React.

Video

Navigation