Fermeture des modaux ou de la liste déroulante sur un clic ou un défilement extérieur.

Avez-vous déjà créé un modal ou une liste déroulante et avez-vous eu du mal à comprendre comment le fermer lorsque l'utilisateur clique à l'extérieur ? Ouais..

Voici un crochet de réaction sympa pour vous qui peut gérer cela

import { useEffect, useRef } from "react";

const useOutsideClickOrScroll = <T extends HTMLElement>(
  callback: () => void
) => {
  const ref = useRef<T>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        callback();
      }
    };

    const handleScroll = () => {
      callback();
    };

    document.addEventListener("mousedown", handleClickOutside);
    window.addEventListener("scroll", handleScroll, true);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      window.removeEventListener("scroll", handleScroll, true);
    };
  }, [callback]);

  return ref;
};

export default useOutsideClickOrScroll;

Ce hook utilise useRef pour cibler un élément DOM et déclenche un rappel sur les clics extérieurs ou les événements de défilement, garantissant ainsi un nettoyage approprié avec useEffect. Il renvoie la référence pour une fixation facile à n'importe quel élément DOM.

Voici un exemple d'utilisation

import React, { useState } from "react";
import useOutsideClickOrScroll from "./useOutsideClickOrScroll";

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
  };

  const ref = useOutsideClickOrScroll<HTMLDivElement>(handleClose);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && (
        <div ref={ref}>
          <p>Dropdown Content</p>
        </div>
      )}
    </div>
  );
};

export default Dropdown;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!