Sign in Get Started

react click outside

Larry Liang 
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,
};
View another examples Add Own solution
Log in, to leave a comment

4
3
Will Matheson 110 points 

                                    import React, { useRef, useEffect } from &quot;react&quot;;

/**
 * Hook that alerts clicks outside of the passed ref
 */
function useOutsideAlerter(ref) {
    useEffect(() =&gt; {
        /**
         * Alert if clicked on outside of element
         */
        function handleClickOutside(event) {
            if (ref.current &amp;&amp; !ref.current.contains(event.target)) {
                alert(&quot;You clicked outside of me!&quot;);
            }
        }

        // Bind the event listener
        document.addEventListener(&quot;mousedown&quot;, handleClickOutside);
        return () =&gt; {
            // Unbind the event listener on clean up
            document.removeEventListener(&quot;mousedown&quot;, handleClickOutside);
        };
    }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */
export default function OutsideAlerter(props) {
    const wrapperRef = useRef(null);
    useOutsideAlerter(wrapperRef);

    return &lt;div ref={wrapperRef}&gt;{props.children}&lt;/div&gt;;
}

4 (3 Votes)
0
Are there any code examples left?
Find Add Code snippet
New code examples in category Other
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
react onclick outside of component click outside div to close in react outside click event in react react outside click package detect click outside of the element in react js how to find that an click event is happen outside a div in react js on click outside react on outside click div react react-outside-click-handler demo if click outside div react close on outside click react react js click outside component how to detect a click outside a form react react click outside handler detect click outside component react how to trigger div outside click in react class component react click outside input on click outside reac simple method detect a click outside an element react react click outside element handle click outside react react run function when click outside of component clocse on click outside react react if click outside component npm react use click outside how do i detect a click outside an element react onClick outside react js react click outside div to close handle outside click in react functional component handle outside click in react react click outside element event outside click in react how to outside click in react on click outside react library how to detect outside click in react trigger click outside div in react react onclick outside div css on click outside react react event listener click outside element click outside component event react react onclick anywhere outside reactjs outside click listener react handle click outside element react handle outside click click on outside div react react detect click outside react detec when click outside of component react detect click outside element react on click outside outside click package react click outside of element react click outside input in react call function when click outside div in react react click outside in class component click outside the area in react component outside click rect handle click outside Detect click outside div using react react on outside click react detect click outside div how to detect click outside div in react click outside a element change state react react click event outside of component react click outside button react click outside dropdown detect click outside div react react click event outside component react native click outside react if clicked outside react close click outside react native detect click outside component register click outside react react check outside click detecting outside click react react outside click event on outside click of the component in react native js detect click outside element react react detect click outside of component functional react detect click outside of component react detect click outside component onclick outside react react outside click handler react click outside component class component react click outside component hook use click outside react outside container handle click react css react click outside click outside div react click outside react component react click outside div react onClick outside npm react css click outside div click outside div to close react click outside div to close react iuse use outside click react event when click outside div react react click outside without wrapper outside div click event in react outsideclickhandler react click outside react npm click outside react package detect click outside element react react use click outside detect outside click react on outside click react react onclick outside react outside click tracker react window click outside element Detect click outside a react component onclick outside div react click outside of div in react react trigger click on outside call function on click outside of div reactjs react handle click outside outside click listener react on outside click close react react outside click menu click outside react react click outside component outside click react react onclick outside component how to find outside click input in react js react click outside capture click outside react component
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source