@reactivers/hooks Github link@reactivers/hooks NPM link



  • 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";



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;


    interface IUseClickOutsideReturns {
        clicked: boolean


Example Preview - CodeSandbox