import React, { useRef, useEffect, useState } from "react";
const Test = () => {
const divRef = useRef();
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
function handleDocumentClick(e) {
if (
divRef.current &&
!divRef.current.contains(e.target) &&
divRef.current !== e.target
) {
setIsOpen(false);
}
}
document.addEventListener("click", handleDocumentClick);
return () => {
document.removeEventListener("click", handleDocumentClick);
};
}, []);
return (
<div>
<button
className="px-5 py-2 border border-gray-400 rounded"
onClick={(e) => {
e.stopPropagation();
setIsOpen((prev) => !prev);
}}>
English
</button>
{isOpen && (
<div
ref={divRef}
className="px-5 py-2 rounded border border-gray-400 rounded flex flex-col gap-3 inline-flex">
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
aut voluptatem reiciendis modi sapiente deleniti quaerat repellat,
provident ea quas nemo voluptatum cupiditate perferendis iusto earum
molestiae molestias ratione veniam.
</div>
<button>Arabic</button>
<button>German</button>
</div>
)}
</div>
);
};
export default Test;
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)