Navegação Responsiva com um Hook React Personalizado

Introdução

Neste projeto, você aprenderá como criar um Hook React personalizado chamado useWindowSize para obter o tamanho atual da janela e usá-lo para renderizar condicionalmente a barra de navegação em uma aplicação web.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Implementar o Hook personalizado useWindowSize para obter o tamanho atual da janela
• Usar o Hook useWindowSize no componente App para atualizar a barra de navegação com base na largura da janela

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um Hook React personalizado para encapsular funcionalidades reutilizáveis
• Utilizar os hooks useState e useEffect para gerenciar o estado e efeitos colaterais (side effects)
• Renderizar componentes condicionalmente com base no tamanho atual da janela

Implementar o Hook useWindowSize

Para começar, abra o editor. Você pode ver os seguintes arquivos no seu editor.

├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── hooks
    │   └── useWindowSize.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js

Nesta etapa, você aprenderá como implementar o Hook personalizado useWindowSize para obter o tamanho atual da janela.

1. Abra o arquivo useWindowSize.js localizado no diretório src/Hooks.
2. Neste arquivo, importe as dependências necessárias:

import { useEffect, useState } from "react";

3. Defina a função useWindowSize:

import { useEffect, useState } from "react";

export const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const changeWindowSize = () => {
    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    window.addEventListener("resize", changeWindowSize);

    return () => {
      window.removeEventListener("resize", changeWindowSize);
    };
  }, []);

  return windowSize;
};

Explicação:

• A função useWindowSize retorna um objeto contendo a largura e altura atuais da janela.
• O hook useState é usado para criar uma variável de estado windowSize e uma função setWindowSize para atualizá-la.
• A função changeWindowSize é definida para atualizar o estado windowSize quando a janela é redimensionada.
• O hook useEffect é usado para adicionar um event listener para o evento resize e removê-lo quando o componente é desmontado.
• O objeto windowSize é retornado da função useWindowSize.

Testar a Aplicação

1. Salve o arquivo useWindowSize.js.
2. Baixe as dependências usando o comando npm install no terminal, aguarde a conclusão do download das dependências e, em seguida, inicie o projeto usando o comando npm start.
3. Após o projeto iniciar com sucesso, clique em "Web 8080" para visualizá-lo no seu navegador.
4. O efeito é que, quando o usuário redimensiona a janela, o conteúdo inferior mostrará a largura da janela, e a barra de navegação superior ocultará dois submenus em telas pequenas e mostrará três menus em telas grandes.

Parabéns! Você implementou com sucesso o Hook useWindowSize e o utilizou no componente App para atualizar a barra de navegação com base no tamanho da janela.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.