useClickOutside, un nouveau hook personnalisé !

La performance est un aspect crucial du développement d'applications web, et garantir une expérience utilisateur fluide implique souvent de détecter les interactions de l'utilisateur ou la visibilité des éléments. Dans cet article, je vais vous présenter un hook React personnalisé appelé useClickOutside. Ce hook simplifie le processus de détection des clics en dehors d'un élément spécifique, une exigence courante pour la mise en œuvre de fonctionnalités telles que les modales, les menus déroulants ou les fenêtres contextuelles. En exploitant useClickOutside, vous pouvez améliorer considérablement l'expérience utilisateur de vos applications React.

Présentation de useClickOutside

Le hook useClickOutside est conçu pour déterminer si un utilisateur a cliqué en dehors d'un élément spécifique dans une application React. Il est utile dans des scénarios où vous souhaitez fermer une modale, masquer un menu déroulant ou rejeter une fenêtre contextuelle lorsque l'utilisateur clique en dehors du composant pertinent. Le hook est simple et exploite les fonctions useRef et useEffect de React.

Voici comment fonctionne le hook useClickOutside :

1import { RefObject, useEffect } from 'react';
2
3export const useClickOutside = (
4  ref: RefObject<HTMLElement>,
5  handleOnClickOutside: (event: MouseEvent | TouchEvent) => void
6) => {
7  useEffect(() => {
8    const listener = (event: MouseEvent | TouchEvent) => {
9      if (!ref.current || ref.current.contains(event.target as Node)) {
10        return;
11      }
12      handleOnClickOutside(event);
13    };
14    document.addEventListener('mousedown', listener);
15    document.addEventListener('touchstart', listener);
16    return () => {
17      document.removeEventListener('mousedown', listener);
18      document.removeEventListener('touchstart', listener);
19    };
20  }, [ref, handleOnClickOutside]);
21}

Comment utiliser useClickOutside

Prenons un exemple d'utilisation du hook useClickOutside pour fermer une modale lorsque l'utilisateur clique en dehors de celle-ci :

1import React, { useRef } from 'react';
2import { useClickOutside } from './useClickOutside';
3
4function Modal() {
5  const modalRef = useRef();
6
7  // État pour gérer la visibilité de la modale
8  const [isOpen, setIsOpen] = useState(true);
9
10  // Fonction pour fermer la modale
11  const closeModal = () => {
12    setIsOpen(false);
13  };
14
15  // Attachez l'écouteur de clic en dehors à la modale
16  useClickOutside(modalRef, closeModal);
17
18  return (
19    <div ref={modalRef} className={`modal ${isOpen ? 'ouvert' : 'fermé'}`}>
20  <div contenu de la modale="">
21    <p>Cliquez en dehors pour fermer cette modale</p>
22  </div>
23  </div>
24);
25}
26
27function App() {
28  return (
29    <div className="application">
30      <h1>Exemple de clic en dehors de React</h1>
31  <Modal />
32  </div>
33);
34}
35
36export default App;

Dans cet exemple, le hook useClickOutside est appliqué au composant Modal et il écoute les clics en dehors du contenu de la modale. Lorsqu'un clic se produit en dehors de la modale, la fonction closeModal est appelée, ce qui modifie la visibilité de la modale. Ceci n'est qu'une des nombreuses façons d'utiliser le hook useClickOutside pour améliorer les interactions de l'utilisateur dans vos applications React.

En conclusion, le hook useClickOutside simplifie le processus de gestion des événements de clic en dehors d'un élément spécifique, rendant votre application React plus conviviale et performante. Vous pouvez facilement intégrer ce hook personnalisé dans vos projets pour offrir une meilleure expérience utilisateur et optimiser les performances.