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



  • useClickInside listens for any click inside of specific element.
  • Helps you detect any click event inside of specific element
  • You can call any function when a user clicked inside of specific element
const clicked = useClickInside({ref, callback});

Getting Started

  • You need to import useClickInside .

From Collection

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

From Package

import { useClickInside } from "@reactivers/use-click-inside";



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

    //Triggered on click inside
    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 IUseClickInsideReturns {
        clicked: boolean


Example Preview - CodeSandbox