Como criar um menu suspenso no React com Tailwind CSS usando useReducer e useRef

A criação de menus suspensos em um aplicativo React pode aprimorar a experiência do usuário, fornecendo uma maneira compacta de navegar e acessar informações adicionais. Neste guia, implementaremos dois menus suspensos – um para notificações e outro para configurações de perfil de usuário – usando useReducer para gerenciamento de estado e useRef para lidar com cliques externos para fechar os menus suspensos. Também incorporaremos ícones Font Awesome para uma aparência sofisticada.

Introdução

No desenvolvimento web moderno, gerenciar interfaces de usuário de forma eficiente é crucial. React, combinado com Tailwind CSS, fornece um kit de ferramentas poderoso para construir componentes responsivos. Aprenderemos como lidar com a funcionalidade de menu suspenso no React, garantindo que clicar fora de um menu suspenso irá fechá-lo, enquanto mantém a capacidade de abrir ou fechar cada menu suspenso de forma independente.

O que são useReducer e useRef?

Antes de mergulhar no código, vamos entender os dois ganchos React que usaremos:

• useReducer: Este gancho é uma alternativa ao useState para gerenciar o estado em componentes funcionais. É especialmente útil para gerenciar lógicas de estado complexas e múltiplas variáveis ​​de estado. O gancho useReducer usa uma função redutora e um estado inicial, retornando o estado atual e uma função de expedição para atualizar esse estado.

• useRef: Este gancho fornece uma maneira de fazer referência direta aos elementos DOM. É útil para acessar e manipular elementos sem acionar novas renderizações. No nosso caso, usaremos useRef para verificar se um clique ocorreu fora dos menus suspensos.

Implementação passo a passo

Etapa 1: configurar o projeto

Primeiro, certifique-se de ter um projeto React configurado com Tailwind CSS. Se você não tiver um, você pode criá-lo usando Create React App:

npx create-react-app my-dropdown-app
cd my-dropdown-app
npm install tailwindcss
npx tailwindcss init

Configure o Tailwind adicionando as seguintes linhas ao seu tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Em seguida, adicione as diretivas Tailwind ao seu index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Etapa 2: Instale a fonte incrível

Para usar os ícones Font Awesome, você precisa instalar o pacote @fortawesome/react-fontawesome:

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

Etapa 3: Crie o componente da barra de navegação

Em seu diretório src, crie um novo arquivo chamado Navbar.tsx. Este componente conterá os menus suspensos.

Implementar o código da barra de navegação

Aqui está o código do componente Navbar, que utiliza useReducer e useRef para lidar com estados suspensos e cliques externos.

import React, { useRef, useEffect, useReducer } from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBell, faUser, faCaretDown } from '@fortawesome/free-solid-svg-icons';

interface IState {
  isProfileOpen: boolean;
  isNotificationOpen: boolean;
}

type Action =
  | { type: 'toggleProfile' }
  | { type: 'toggleNotification' }
  | { type: 'closeAll' };

function reducer(state: IState, action: Action): IState {
  switch (action.type) {
    case 'toggleProfile':
      return {
        isProfileOpen: !state.isProfileOpen,
        isNotificationOpen: false
      };
    case 'toggleNotification':
      return {
        isProfileOpen: false,
        isNotificationOpen: !state.isNotificationOpen
      };
    case 'closeAll':
      return {
        isProfileOpen: false,
        isNotificationOpen: false
      };
    default:
      return state;
  }
}

const Navbar: React.FC = () => {
  const [state, dispatch] = useReducer(reducer, { isProfileOpen: false, isNotificationOpen: false });
  const profileDropdownRef = useRef(null);
  const notificationDropdownRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Node;

      if (
        (profileDropdownRef.current && !profileDropdownRef.current.contains(target)) ||
        (notificationDropdownRef.current && !notificationDropdownRef.current.contains(target))
      ) {
        dispatch({ type: 'closeAll' });
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const toggleProfileDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleProfile' });
  };

  const toggleNotificationDropdown = (event: React.MouseEvent) => {
    event.stopPropagation();
    dispatch({ type: 'toggleNotification' });
  };

  const closeDropdowns = () => {
    dispatch({ type: 'closeAll' });
  };

  const notificationItems = [
    { text: "New data received", time: "2 Days Ago" },
    { text: "New update available", time: "1 Day Ago" },
    { text: "Scheduled maintenance", time: "3 Days Ago" },
  ];

  const profileItems = [
    { label: "Profile", link: "#" },
    { label: "Settings", link: "#" },
    { label: "Logout", link: "#" }
  ];

  return (
    

      
    
  );
};

export default Navbar;

Etapa 4: integre a barra de navegação ao seu aplicativo

Abra seu arquivo App.tsx e importe o componente Navbar para incluí-lo no layout do seu aplicativo.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Navbar from './components/Navbar';

const App: React.FC = () => {
  return (
    
      
      

        
Welcome to DC Dashboard!
        {/* Other components and content */}
      
    
  );
};

export default App;

Etapa 5: estilizar com Tailwind CSS

As classes fornecidas pelo Tailwind CSS já devem oferecer um design elegante. No entanto, fique à vontade para personalizar estilos conforme necessário.

Etapa 6: teste o aplicativo

Inicie seu aplicativo executando:

bash
npm start

Agora você deve ver uma barra de navegação na parte superior do seu aplicativo com menus suspensos funcionais para notificações e configurações de perfil do usuário.

Perguntas frequentes

1. Como o gancho useReducer funciona neste exemplo?

O gancho useReducer nos permite gerenciar o estado de vários menus suspensos com eficiência. Definimos uma função redutora que pega o estado atual e uma ação para retornar o novo estado. Este padrão é útil para alternar menus suspensos e lidar com a lógica para fechar todos os menus suspensos de uma vez.

2. Por que usar useRef?

Usamos useRef para fazer referência aos elementos suspensos. Isso nos permite verificar se ocorreu um evento de clique fora desses elementos. Se isso acontecer, despachamos uma ação para fechar os menus suspensos, garantindo uma experiência de usuário limpa.

3. Posso adicionar mais menus suspensos?

Sim! Você pode estender o estado no redutor e adicionar mais menus suspensos da mesma forma. Apenas certifique-se de que cada menu suspenso tenha sua própria função de referência e alternância.

4. O Tailwind CSS é necessário para esta implementação?

Não, Tailwind CSS não é obrigatório. Você pode estilizar seus menus suspensos com qualquer estrutura CSS ou estilos CSS personalizados, mas o Tailwind torna o estilo mais rápido e responsivo.

Conclusão

Neste guia, você aprendeu como criar um menu suspenso funcional no React usando useReducer para gerenciamento de estado e useRef para lidar com cliques externos. Essa abordagem fornece uma maneira limpa e eficiente de gerenciar interações complexas de UI, melhorando a experiência geral do usuário. Sinta-se à vontade para desenvolver essa base e personalizá-la para atender às necessidades da sua aplicação!