Como pegar a largura da tela em React.js

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!