Käyttötarkoitus
Käytä useOnClickOutside-hookia, kun haluat tunnistaa klikkauksen tietyn elementin ulkopuolella. Hook on hyödyllinen tilanteissa, joissa jokin avattava elementti halutaan sulkea käyttäjän klikatessa sen ulkopuolella.
Esimerkki
function UseOnClickOutsideExample() {
const buttonRef = useRef(null);
const contentRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
useOnClickOutside(contentRef, (e) => {
if (buttonRef.current === e.target) {
return;
}
setIsOpen(false);
});
return (
<>
<Button
appearance="outline"
aria-controls="example-content"
aria-expanded={isOpen}
className="kds-mb-4"
onClick={() => setIsOpen(!isOpen)}
ref={buttonRef}
>
{isOpen ? "Sulje sisältö" : "Näytä sisältö"}
</Button>
{isOpen ? (
<div ref={contentRef} id="example-content">
<Box variant="primary" appearance="outline">
<Text>Klikkaa mihin tahansa tämän sisällön ulkopuolelle sulkeaksesi elementin.</Text>
</Box>
</div>
) : null}
</>
);
}