CODEWITHSUNDEEP
javascriptreactjs
Jithin Joseph
Jithin Joseph

Reputation: 151

Detect click outside react parent component

How to know that user has clicked outside our react app which is pointed to

<div id="root">

(I'm having extra space to click outside root div)

I've tried the below code

import ReactDOM from 'react-dom';
// ... ✂

componentDidMount() {
    document.addEventListener('click', this.handleClickOutside, true);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClickOutside, true);
}

handleClickOutside = event => {
    const domNode = ReactDOM.findDOMNode(this);

    if (!domNode || !domNode.contains(event.target)) {
        this.setState({
            visible: false
        });
    console.log("clicked outside")
    }
}

But then, even if I clicked inside some child popup component under parent, it is showing as "clicked outside"

If I click anywhere inside the app (including children component), it should not say, "clicked outside"

So is there any way to know that the user clicked outside the complete app itself?

Upvotes: 3

Views: 6541

Answers (2)

Dmitry Reutov
Dmitry Reutov

Reputation: 3032

There is a special component, just wrap your component in it and that's it...very convinient

import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  handleClickOutside = evt => {
    // ..handling code goes here...
  };
}

export default onClickOutside(MyComponent);

https://github.com/Pomax/react-onclickoutside

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53974

The easiest way is to set a listener to the application container (the outmost element in the tree), instead of finding the id="root" element.

So, with given index.html:

<div id="root"></div>
<div>Div which outside of app</div>

Possible implementation can be (check the logs):

function useOnClickOutside(ref, handler) {
  useEffect(() => {
    const listener = event => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
}

const App = () => {
  const divRef = useRef();
  const handler = useCallback(() => console.log(`Click Outside`), []);
  useOnClickOutside(divRef, handler);

  return (
    <div
      ref={divRef}
      style={{
        margin: `0.5rem`,
        padding: `1rem`,
        border: `2px solid black`,
        cursor: `pointer`
      }}
    >
      Application
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Edit currying-dust-cpscu

Upvotes: 1

Related Questions