Module lib/hooks/useOutsideClickHandler

useOutsideClickHandler

• useOutsideClickHandler(refs: RefObject<undefined | null | HTMLElement>[], outsideClickHandler: ((event: MouseEvent) => void)): void

• This is a utility for tracking clicks outside of a set of elements.

  const MyComponent = () => {
      const ref = useRef<HTMLDivElement>(null);
      useOutsideClickHandler(
          [ref],
          useCallback(() => {
              alert('Clicked outside!');
          }, [])
      );
  
      return (
          <div className="outside">
              outside
              <div className="inside" ref={ref}>inside</div>
          </div>
      );
  };
  

  Parameters

  • refs: RefObject<undefined | null | HTMLElement>[]

    A list of react refs to components that when clicked will NOT fire the outsideClickHandler

  • outsideClickHandler: ((event: MouseEvent) => void)

    The handler to run when an element outside of refs is clicked.

    • • (event: MouseEvent): void

      • Parameters

        • event: MouseEvent

        Returns void

  Returns void