Neste artigo você vai aprender a como pegar a largura da tela em React, vamos utilizar propriedades de um objeto de JavaScript!
Fala programador(a), beleza? Bora aprender mais sobre React e JS!
A realidade é que não precisamos de React para realizar esta tarefa básica
Podemos obter tanto largura da tela como altura da tela com JavaScript puro
Estas propriedades vem do objeto window, que está presente em qualquer programa que rode JS
Você vai utilizar:
- innerHeight: para a altura;
- innerWidth: para a largura;
Veja um exemplo prático:
const { innerWidth: width, innerHeight: height } = window;
Aqui estamos desestruturando as propriedades em nomes de variáveis mais simples, que são: width e height
Lembrando que esse código pode ser adicionado a um dos seus componentes, ou também um hook
Talvez a abordagem mais interessante seja criar um custom hook, para permitir a reutilização deste código
Deixe um comentário contando o que achou desta solução 🙂
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Neste artigo você aprendeu a como pegar a largura da tela em React
Utilizamos a propriedade innerWidth de window, e para pegar a altura innerHeight
Este objeto vem da linguagem JavaScript, e não está atrelado ao React.js
Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!
Muito bom