//you can create a ref

const genericRef = useRef(null)

//create a callback function for our future event listener 

const handleOutsideClick = (e) => {

      if(genericRef.current && !yearsListRef.current.contains(e.target) && anything_else_you_need_to_check){

        // do something

      }

}

// next you can use a useEffect to mount the listener when the component load

// click event occurs when you click the mouse down and release it

// mousedown occurs inmediatly after you click it without realease it

useEffect(() => {

    document.addEventListener("mousedown", handleOutsideClick);

    return () => document.removeEventListener("mousedown", handleOutsideClick);

}, []);

​

// and finally you can add your ref to your tag or component

<MyComponent ref={genericRef}/>

import React, { useState, useRef, useEffect } from "react";

import ReactDOM from "react-dom";

​

function App() {

  const wrapperRef = useRef(null);

  const [isVisible, setIsVisible] = useState(true);

​

  // below is the same as componentDidMount and componentDidUnmount

  useEffect(() => {

    document.addEventListener("click", handleClickOutside, false);

    return () => {

      document.removeEventListener("click", handleClickOutside, false);

    };

  }, []);

​

  const handleClickOutside = event => {

    if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {

      setIsVisible(false);

    }

  };

​

  return (

    isVisible && (

      <div className="menu" ref={wrapperRef}>

        <p>Menu</p>

      </div>

    )

  );

}

​

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

const componentRef = useRef();

​

useEffect(() => {

    document.addEventListener("click", handleClick);

    return () => document.removeEventListener("click", handleClick);

    function handleClick(e: any) {

        if(componentRef && componentRef.current){

            const ref: any = componentRef.current

            if(!ref.contains(e.target)){

                // put your action here

            }

        }

    }

}, []);

import React, { useRef, useEffect } from "react";

​

/**

 * Hook that alerts clicks outside of the passed ref

 */

function useOutsideAlerter(ref) {

    useEffect(() => {

        /**

         * Alert if clicked on outside of element

         */

        function handleClickOutside(event) {

            if (ref.current && !ref.current.contains(event.target)) {

                alert("You clicked outside of me!");

            }

        }

​

        // Bind the event listener

        document.addEventListener("mousedown", handleClickOutside);

        return () => {

            // Unbind the event listener on clean up

            document.removeEventListener("mousedown", handleClickOutside);

        };

    }, [ref]);

}

​

/**

 * Component that alerts if you click outside of it

 */

export default function OutsideAlerter(props) {

    const wrapperRef = useRef(null);

    useOutsideAlerter(wrapperRef);

​

    return <div ref={wrapperRef}>{props.children}</div>;

}

​

import { useState, useEffect, useRef } from 'react';

​

export default function useComponentVisible(initialIsVisible) {

    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);

    const ref = useRef(null);

​

    const handleClickOutside = (event) => {

        if (ref.current && !ref.current.contains(event.target)) {

            setIsComponentVisible(false);

        }

    };

​

    useEffect(() => {

        document.addEventListener('click', handleClickOutside, true);

        return () => {

            document.removeEventListener('click', handleClickOutside, true);

        };

    }, []);

​

    return { ref, isComponentVisible, setIsComponentVisible };

}

const ref = useRef(null);    

    useEffect(() => {

        document.addEventListener("click", handleClick);

        return () => document.removeEventListener("click", handleClick);

        function handleClick(e: any) {

            if(e !== null && ref.current === null){

                // put your action here

            }

        }

    }, []);

yarn add react-detect-click-outside

npm i react-detect-click-outside

​

yarn add react-detect-click-outside

npm i react-detect-click-outside

​

import React, { Component } from 'react';

import PropTypes from 'prop-types';

​

/**

 * Component that alerts if you click outside of it

 */

export default class OutsideAlerter extends Component {

    constructor(props) {

        super(props);

​

        this.wrapperRef = React.createRef();

        this.setWrapperRef = this.setWrapperRef.bind(this);

        this.handleClickOutside = this.handleClickOutside.bind(this);

    }

​

    componentDidMount() {

        document.addEventListener('mousedown', this.handleClickOutside);

    }

​

    componentWillUnmount() {

        document.removeEventListener('mousedown', this.handleClickOutside);

    }

​

    /**

     * Alert if clicked on outside of element

     */

    handleClickOutside(event) {

        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {

            alert('You clicked outside of me!');

        }

    }

​

    render() {

        return <div ref={this.wrapperRef}>{this.props.children}</div>;

    }

}

​

OutsideAlerter.propTypes = {

    children: PropTypes.element.isRequired,

};

​

yarn add react-detect-click-outside

npm i react-detect-click-outside

​

yarn add react-detect-click-outside

npm i react-detect-click-outside

​