Detect click outside React component

javascript

event-listeners

react-hooks

accessibility

byNikita Barsukov·Nov 11, 2024

// Hook to handle clicks acting like mischievous cats
import { useEffect, useRef } from 'react';

function useOutsideAlerter(onOutsideClick) {
  const ref = useRef();

  useEffect(() => {
    const handleClick = (event) => {
      // Is the click doing a Houdini and escaping the component?
      if (ref.current && !ref.current.contains(event.target)) {
        onOutsideClick();
      }
    };
    // Listen to mousedown events, they spill the tea
    document.addEventListener('mousedown', handleClick);
    // Clean up after ourselves like polite coders, no listener left behind!
    return () => document.removeEventListener('mousedown', handleClick);
  }, [onOutsideClick]);

  return ref;
}

// Using our hook in a component, like spread on bread
function MyComponent() {
  const outsideAlerterRef = useOutsideAlerter(() => console.log('Why click outside me? 😢'));
  
  return <div ref={outsideAlerterRef}>Click me, not outside!</div>;
}

This snippet effortlessly lassos all the unruly outside clicks like a championship rodeo cowboy. The useOutsideAlerter hook listens for these rogues, wrangling them into a corral of understanding. Your component just needs to claim its ref and callback function from the hook.

Protect your component's bubble of focus

Outlet stores and online component focus have one thing in common: the quest for hot deals and outside clicks can sometimes lead us astray. But by coupling onBlur and useState hook, we can track focus state while also checking for bargains!

Draft that modular cavalry!

For code reusability and systematic cleanliness, call in the 'useComponentVisible' hook to handle detection of rogue clicks. It's like having a loyal squadron watching your back.

Other tools in your utility belt

Just like Batman needs his gadgets, sometimes you need alternative utilities for finding DOM nodes. You've got choices like ReactDOM.findDOMNode or a protective wrapper such as the react-onclickoutside module. The useOuterClick API could also be your sidekick, especially when dealing with mutable refs and stale values.

Visualization

Remember playing with your toy castle 🏰 as a kid? Now, pretend that each outside click is a brave knight 🐎

Setting your castle's defenses for oncoming clicks looks something like this:

useEffect(() => {
  function handleOutsideClick(event) {
    // Is that a knight I see?
    if (event.target === 🐎 && !castleMoat.contains(🐎)) {
      alert('Attention! Knight on the perimeter! 🚨');
    }
  }
  document.addEventListener('mousedown', handleOutsideClick);
  return () => {
    document.removeEventListener('mousedown', handleOutsideClick);
  };
});

This gives your castle 🏰 an eagle eye for detecting any knight 🐎 daring to venture outside.

Tips and potential roadblocks

Common pitfalls in managing outside clicks:

Leaving unwanted footprints: event listener leaks

Just like a diligent scout, promise to leave no trace! That means unbind event listeners in useEffect's cleanup.

The sneaky stale closures

A stale closure is like an out-of-date map — useless and confusing. Always include dependencies in the dependency array to refresh state.

Accessibility: Not just a buzzword

Remember, every element is worthy of focus. Make interactive elements focusable with tabindex for a user-friendly experience.

Mobile compatibility: Don't forget the small screens!

For iOS, event bubbling is restricted. A click listener on the root div can capture outside clicks effectively.

explain-codes / Javascript / Detect click outside React component

Linked

What is the exact difference between currentTarget property and target property in JavaScript?



How to get the focused element with jQuery?



How do I find out which DOM element has the focus?



Can you target an element's parent element using event.target?



How can I set focus on an element in an HTML form using JavaScript?



Using jQuery to test if an input has focus



Detect click outside Angular component



Visualization Tips and potential roadblocks