Comment créer une liste déroulante dans React avec Tailwind CSS à l'aide de useReducer et useRef

La création de menus déroulants dans une application React peut améliorer l'expérience utilisateur en fournissant un moyen compact de naviguer et d'accéder à des informations supplémentaires. Dans ce guide, nous allons implémenter deux listes déroulantes : une pour les notifications et une pour les paramètres de profil utilisateur, en utilisant useReducer pour la gestion de l'état et useRef pour gérer les clics extérieurs pour fermer les listes déroulantes. Nous incorporerons également des icônes Font Awesome pour un look soigné.

Introduction

Dans le développement Web moderne, la gestion efficace des interfaces utilisateur est cruciale. React, combiné à Tailwind CSS, fournit une boîte à outils puissante pour créer des composants réactifs. Nous apprendrons comment gérer la fonctionnalité de liste déroulante dans React, en garantissant que cliquer en dehors d'une liste déroulante la fermera, tout en conservant la possibilité d'ouvrir ou de fermer chaque liste déroulante indépendamment.

Que sont useReducer et useRef ?

Avant de plonger dans le code, comprenons les deux hooks React que nous utiliserons :

• useReducer : ce hook est une alternative à useState pour gérer l'état des composants fonctionnels. Il est particulièrement utile pour gérer une logique d’état complexe et plusieurs variables d’état. Le hook useReducer prend une fonction de réduction et un état initial, renvoyant l'état actuel et une fonction de répartition pour mettre à jour cet état.

• useRef : ce hook fournit un moyen de référencer directement les éléments DOM. Il est utile pour accéder et manipuler des éléments sans déclencher de nouveaux rendus. Dans notre cas, nous utiliserons useRef pour vérifier si un clic a eu lieu en dehors des menus déroulants.

Mise en œuvre étape par étape

Étape 1 : configurer le projet

Tout d'abord, assurez-vous d'avoir un projet React configuré avec Tailwind CSS. Si vous n'en avez pas, vous pouvez le créer à l'aide de Create React App :

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

Configurez Tailwind en ajoutant les lignes suivantes à votre tailwind.config.js :

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

Ensuite, ajoutez les directives Tailwind à votre index.css :

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

Étape 2 : Installer Font Awesome

Pour utiliser les icônes Font Awesome, vous devez installer le package @fortawesome/react-fontawesome :

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

Étape 3 : Créer le composant Navbar

Dans votre répertoire src, créez un nouveau fichier nommé Navbar.tsx. Ce composant contiendra les listes déroulantes.

Implémenter le code Navbar

Voici le code du composant Navbar, qui utilise useReducer et useRef pour gérer les états déroulants et les clics extérieurs.

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;

Étape 4 : Intégrez la barre de navigation dans votre application

Ouvrez votre fichier App.tsx et importez le composant Navbar pour l'inclure dans la présentation de votre application.

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;

Étape 5 : Style avec Tailwind CSS

Les classes fournies par Tailwind CSS devraient déjà donner un design soigné. Cependant, n'hésitez pas à personnaliser les styles selon vos besoins.

Étape 6 : tester l'application

Démarrez votre application en exécutant :

bash
npm start

Vous devriez maintenant voir une barre de navigation en haut de votre application avec des listes déroulantes fonctionnelles pour les notifications et les paramètres de profil utilisateur.

FAQ

1. Comment fonctionne le hook useReducer dans cet exemple ?

Le hook useReducer nous permet de gérer efficacement l'état de plusieurs listes déroulantes. Nous définissons une fonction réductrice qui prend l'état actuel et une action pour renvoyer le nouvel état. Ce modèle est utile pour basculer les listes déroulantes et gérer la logique de fermeture de toutes les listes déroulantes en même temps.

2. Pourquoi utiliser useRef ?

Nous utilisons useRef pour référencer les éléments de la liste déroulante. Cela nous permet de vérifier si un événement de clic s'est produit en dehors de ces éléments. Si tel est le cas, nous envoyons une action pour fermer les listes déroulantes, garantissant ainsi une expérience utilisateur propre.

3. Puis-je ajouter d'autres listes déroulantes ?

Oui! Vous pouvez étendre l'état dans le réducteur et ajouter d'autres listes déroulantes de la même manière. Assurez-vous simplement que chaque liste déroulante a sa propre fonction de référence et de bascule.

4. Tailwind CSS est-il nécessaire pour cette implémentation ?

Non, Tailwind CSS n'est pas obligatoire. Vous pouvez styliser vos listes déroulantes avec n'importe quel framework CSS ou styles CSS personnalisés, mais Tailwind rend le style plus rapide et plus réactif.

Conclusion

Dans ce guide, vous avez appris à créer un menu déroulant fonctionnel dans React en utilisant useReducer pour la gestion de l'état et useRef pour gérer les clics extérieurs. Cette approche offre un moyen propre et efficace de gérer les interactions complexes de l’interface utilisateur, améliorant ainsi l’expérience utilisateur globale. N'hésitez pas à vous appuyer sur cette base et à la personnaliser pour l'adapter aux besoins de votre application !