Introduction

• useClickOutside listens for any click outside of specific element.
• Helps you detect any click event outside of specific element
• You can call any function when a user clicked outside of specific element

const clicked = useClickOutside({ref, callback});

Getting Started

• You need to import useClickOutside .

From Collection

import { useClickOutside } from "@reactivers/hooks";

From Package

import { useClickOutside } from "@reactivers/use-click-outside";

Interfaces

Props

interface IUseClickOutside {
    //Any element's ref object
    ref: MutableRefObject<any>;

    //Triggered on click outside
    callback: (event: MouseEvent | TouchEvent) => void;

    //For each click it tracks last state.
    //If sets True it useses useState to track cliced boolean value. Otherwise uses useRef
    withState?: boolean; // Default = False

    //Event options. If you won't call preventDefault you don't need to set this.
    passive?: boolean;
}

Returns

    interface IUseClickOutsideReturns {
        clicked: boolean
    }

Example

Run Example