Como pegar a altura da janela em React JS

Neste artigo você aprender a como pegar a altura da janela em React JS, para realizar alguma modificação dependendo do tamanho

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Em projetos de desenvolvimento web, frequentemente nos deparamos com a necessidade de obter as dimensões da janela do navegador, como sua largura e altura.

Isso pode ser crucial para ajustes responsivos, animações, posicionamento de elementos entre outras funcionalidades.

Com a crescente popularidade do React JS, a pergunta é: como podemos pegar a altura da janela usando essa biblioteca?

Neste artigo exploraremos uma abordagem moderna e otimizada para pegar a altura da janela em um componente funcional do React JS.

A API de Janela

Antes de nos aprofundarmos no React, é fundamental compreender que o objeto global window no JavaScript nos fornece acesso às dimensões da janela através das propriedades window.innerHeight e window.innerWidth.

A Abordagem React

A beleza do React é que ele nos permite encapsular essa lógica dentro de componentes, proporcionando um melhor gerenciamento e reatividade das propriedades da janela.

Pegando a Altura da Janela

Vamos criar um componente funcional que exibe a altura da janela:

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

function MostrarAltura() {
  const [alturaJanela, setAlturaJanela] = useState(window.innerHeight);

  useEffect(() => {
    const handleResize = () => {
      setAlturaJanela(window.innerHeight);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>A altura da janela é: {alturaJanela}px</p>;
}

Neste exemplo, começamos definindo o estado inicial da altura da janela com window.innerHeight.

Em seguida, usamos o hook useEffect para adicionar um event listener que detecta qualquer mudança no tamanho da janela.

Sempre que a janela é redimensionada, atualizamos o estado com a nova altura. Para evitar vazamentos de memória, removemos o event listener quando o componente é desmontado.

Otimizando com Custom Hooks

Se quisermos reutilizar a lógica de detectar mudanças na altura da janela em diferentes partes do nosso aplicativo, podemos criar um custom hook:

import { useState, useEffect } from 'react';

function useAlturaJanela() {
  const [altura, setAltura] = useState(window.innerHeight);

  useEffect(() => {
    const handleResize = () => {
      setAltura(window.innerHeight);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return altura;
}

// Uso:
function ComponenteExemplo() {
  const alturaJanela = useAlturaJanela();

  return <p>A altura da janela é: {alturaJanela}px</p>;
}

Ao encapsular essa lógica em useAlturaJanela, tornamos nosso código mais modular e reutilizável, seguindo os princípios do React de composição e reusabilidade.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Obter a altura da janela em React JS é uma tarefa relativamente simples, mas, com as práticas e ferramentas certas, podemos otimizar essa lógica para torná-la mais eficiente e reutilizável em nossos projetos.

A abordagem moderna usando hooks como useState e useEffect nos permite criar soluções reativas e otimizadas.

Além disso, o conceito de custom hooks no React eleva essa abordagem a um novo nível, permitindo-nos criar lógicas encapsuladas que podem ser facilmente compartilhadas e reutilizadas em toda a nossa aplicação.

Assim, sempre que se deparar com a necessidade de trabalhar com dimensões da janela ou outras propriedades globais do navegador em React, lembre-se de utilizar hooks e, se possível, encapsular sua lógica em custom hooks para maximizar a eficiência e a reusabilidade do seu código.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.