Skip to content

UseClickOutside

Vincent Hermann edited this page Apr 21, 2022 · 1 revision

Description

This hook is used to detech whenever you click outside of an element, it's usefull for disabling a side panel

Example

import { useClickOutside } from '@oneforx/poseidon';
import { useRef } from "react";

export const Page = () => {
    const buttonRef = useRef();

    useClickOutside(buttonRef, () => {
        console.log("You clicked outside of the element")
    });
    
    return (
        <div>
            <p className="text-blue-500">Please don't click the button but this text</p>
            <button ref={buttonRef}>CLICK ME !</button>
        </div>
    );
}
Clone this wiki locally