I am creating language switcher component using tailwind css.

Language chooser is working fine, but I can't hide the Language when click outside of the .

Is there any react component for Language Switcher?

May I know how to hide the div click outside.

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { MyanmarFlag, EnglishFlag } from "../assets/icons/svg_icons";

const LanguageSelector = () => {
  const [isOpen, setIsOpen] = useState(false);
  const { t, i18n } = useTranslation();

   const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
   };

  return (
<div className="flex justify-end p-4">
  <div className="relative">
    <button
      className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 
  bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
   focus:ring-offset-gray-100 focus:ring-primary"
      onClick={() => setIsOpen(!isOpen)}
    >
      Select Language
    </button>
    {isOpen && (
      <div
        className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg 
  bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100
  focus:outline-none z-50"
      >
        <div className="py-1">
          <a
            className="group flex items-center px-4 py-2 text-sm text-gray-700
        hover:bg-primary hover:text-white"
            onClick={() => changeLanguage("my")}
          >
            <MyanmarFlag
              className="mr-3 h-5 w-5 text-gray-400 group-hover:text-white"
              aria-hidden="true"
            ></MyanmarFlag>
            Myanmar
          </a>
        </div>
        <div className="py-1">
          <a
            className="group flex items-center px-4 py-2 text-sm text-gray-700
        hover:bg-primary hover:text-white"
            onClick={() => changeLanguage("en")}
          >
            <EnglishFlag
              className="mr-3 h-5 w-5 text-gray-400 group-hover:text-white"
              aria-hidden="true"
            ></EnglishFlag>
            English
          </a>
        </div>
      </div>
    )}
  </div>
</div>
);
};

export default LanguageSelector;

CodePudding user response：

You can use useRef hook and bind event listener to your div, then change your isOpen state.

See Detect click outside React component