Cómo crear un menú desplegable en React con Tailwind CSS usando useReducer y useRef

La creación de menús desplegables en una aplicación React puede mejorar la experiencia del usuario al proporcionar una forma compacta de navegar y acceder a información adicional. En esta guía, implementaremos dos menús desplegables, uno para notificaciones y otro para la configuración del perfil de usuario, usando useReducer para la administración del estado y useRef para manejar clics externos para cerrar los menús desplegables. También incorporaremos íconos de Font Awesome para una apariencia refinada.

Introducción

En el desarrollo web moderno, administrar las interfaces de usuario de manera eficiente es crucial. React, combinado con Tailwind CSS, proporciona un potente conjunto de herramientas para crear componentes responsivos. Aprenderemos cómo manejar la funcionalidad de menú desplegable en React, asegurándonos de que al hacer clic fuera de un menú desplegable se cerrará, mientras mantenemos la capacidad de abrir o cerrar cada menú desplegable de forma independiente.

¿Qué son useReducer y useRef?

Antes de profundizar en el código, comprendamos los dos ganchos de React que usaremos:

• useReducer: Este enlace es una alternativa a useState para gestionar el estado en componentes funcionales. Es especialmente útil para gestionar lógica de estado compleja y múltiples variables de estado. El gancho useReducer toma una función reductora y un estado inicial, devolviendo el estado actual y una función de envío para actualizar ese estado.

• useRef: este enlace proporciona una forma de hacer referencia a elementos DOM directamente. Es útil para acceder y manipular elementos sin activar nuevas renderizaciones. En nuestro caso, usaremos useRef para comprobar si se produjo un clic fuera de los menús desplegables.

Implementación paso a paso

Paso 1: configurar el proyecto

Primero, asegúrese de tener un proyecto de React configurado con Tailwind CSS. Si no tiene una, puede crearla usando la aplicación Create React:

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

Configure Tailwind agregando las siguientes líneas a su tailwind.config.js:

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

Luego, agregue las directivas Tailwind a su index.css:

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

Paso 2: Instale Font Awesome

Para usar los íconos de Font Awesome, necesitas instalar el paquete @fortawesome/react-fontawesome:

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

Paso 3: cree el componente de la barra de navegación

En su directorio src, cree un nuevo archivo llamado Navbar.tsx. Este componente contendrá los menús desplegables.

Implementar el código de la barra de navegación

Aquí está el código del componente Navbar, que utiliza useReducer y useRef para manejar estados desplegables y clics 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;

Paso 4: integra la barra de navegación en tu aplicación

Abra su archivo App.tsx e importe el componente Navbar para incluirlo en el diseño de su aplicación.

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;

Paso 5: Estilo con Tailwind CSS

Las clases proporcionadas por Tailwind CSS ya deberían ofrecer un diseño elegante. Sin embargo, siéntete libre de personalizar los estilos según sea necesario.

Paso 6: Pruebe la aplicación

Inicie su aplicación ejecutando:

bash
npm start

Ahora deberías ver una barra de navegación en la parte superior de tu aplicación con menús desplegables funcionales para notificaciones y configuraciones de perfil de usuario.

Preguntas frecuentes

1. ¿Cómo funciona el gancho useReducer en este ejemplo?

El gancho useReducer nos permite administrar el estado de múltiples menús desplegables de manera eficiente. Definimos una función reductora que toma el estado actual y una acción para devolver el nuevo estado. Este patrón es útil para alternar menús desplegables y manejar la lógica para cerrar todos los menús desplegables a la vez.

2. ¿Por qué utilizar useRef?

Usamos useRef para hacer referencia a los elementos desplegables. Esto nos permite comprobar si se produjo un evento de clic fuera de estos elementos. Si es así, enviamos una acción para cerrar los menús desplegables, garantizando una experiencia de usuario limpia.

3. ¿Puedo agregar más menús desplegables?

¡Sí! Puede ampliar el estado en el reductor y agregar más menús desplegables de manera similar. Solo asegúrese de que cada menú desplegable tenga su propia función de referencia y alternancia.

4. ¿Es necesario Tailwind CSS para esta implementación?

No, Tailwind CSS no es obligatorio. Puede diseñar sus menús desplegables con cualquier marco CSS o estilos CSS personalizados, pero Tailwind hace que el estilo sea más rápido y con mayor capacidad de respuesta.

Conclusión

En esta guía, aprendió cómo crear un menú desplegable funcional en React usando useReducer para la administración del estado y useRef para manejar clics externos. Este enfoque proporciona una forma limpia y eficiente de gestionar interacciones complejas de la interfaz de usuario, mejorando la experiencia general del usuario. ¡Siéntete libre de desarrollar esta base y personalizarla para que se ajuste a las necesidades de tu aplicación!