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

como pegar a altura da janela em React capa

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.

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments