Skip to content
👉All tips here

React Custom Hooks for Click Detection

React custom hook for click detection - frontend tip

While React makes handling click events straightforward with the onClick prop, there are scenarios where you need more advanced click detection, or maybe you’re working on a complex UI where you need to track clicks inside specific areas, whatever it is, let’s explore how to handle clicks outside and inside by creating React custom hooks for click detection.

The Challenge of Complex Click Handling

Sometimes, you must detect clicks outside a component (e.g., closing a dropdown when clicking elsewhere) or track clicks within a component’s boundaries. These scenarios require a bit more finesse than a simple `onClick` handler.

Let’s create two custom hooks for this: useClickOutside and useClickInside.

useClickOutside: A React Hook for External Clicks

First, let’s create a hook to detect clicks outside a component:

import { useEffect, useRef } from 'react';

function useClickOutside(callback) {
  const ref = useRef();

  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    }

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [callback]);

  return ref;
}

This hook creates a ref (provides a way to reference DOM elements), attaches a click listener to the document, and checks if the click occurred outside the referenced element. The ref acts like a pointer to the DOM node, allowing us to interact with it directly when needed.

Here’s how to use it:

function Dropdown({ isOpen, onClose }) {
  const dropdownRef = useClickOutside(onClose);

  if (!isOpen) return null;

  return (
    <div ref={dropdownRef} className="dropdown">
      <p>Click outside to close</p>
    </div>
  );
}

useClickInside: A React Hook for Internal Click Handling

Now, let’s create a hook for detecting clicks inside a component:

import { useEffect, useRef } from 'react';

function useClickInside(callback) {
  const ref = useRef();

  useEffect(() => {
    function handleClickInside(event) {
      if (ref.current && ref.current.contains(event.target)) {
        callback();
      }
    }

    document.addEventListener('mousedown', handleClickInside);
    return () => {
      document.removeEventListener('mousedown', handleClickInside);
    };
  }, [callback]);

  return ref;
}

This hook is similar to useClickOutside, but it triggers the callback when the click is inside the referenced element.

Usage example:

function ClickableArea() {
  const [clicks, setClicks] = useState(0);
  const incrementClicks = () => setClicks(prev => prev + 1);
  const areaRef = useClickInside(incrementClicks);

  return (
    <div ref={areaRef} className="clickable-area">
      <p>Clicks inside: {clicks}</p>
    </div>
  );
}

Benefits of React Custom Hooks for Click Detection

  1. Flexibility: They allow for more complex click interactions beyond simple button clicks.
  2. Reusability: Once created, these hooks can be used across multiple components.
  3. Cleaner Code: They separate click detection logic from component rendering, improving readability.

Improving User Interfaces with React Click Detection Hooks

While React’s built-in event handling is powerful, using these React custom hooks for click detection, you can manage complex UI interactions more effectively in your React applications such as:

  • Modal dialogs: allow users to close modal windows by clicking outside of them, providing an additional and expected way to dismiss overlays.
  • Collapsible Sidebars: Utilize useClickOutside to create sidebars that close when users click on the main content area, helping to maximize screen space when needed.
  • Interactive Data Visualizations Apply useClickInside to specific areas of charts or graphs, allowing you to show additional information or trigger animations when users interact with certain data points.
  • Multi-level Navigation: handles clicks on submenus without closing the entire navigation structure.
  • Accessible Keyboard Navigation: you can extend them to work with keyboard events, improving accessibility for users who navigate via keyboard. Here is an example of this specific case::
function useClickOrKeypress(callback) {
  const ref = useRef();

  useEffect(() => {
    function handleInteraction(event) {
      if (
        (event.type === 'mousedown' || event.key === 'Enter') &&
        ref.current && 
        !ref.current.contains(event.target)
      ) {
        callback();
      }
    }

    document.addEventListener('mousedown', handleInteraction);
    document.addEventListener('keydown', handleInteraction);
    
    return () => {
      document.removeEventListener('mousedown', handleInteraction);
      document.removeEventListener('keydown', handleInteraction);
    };
  }, [callback]);

  return ref;
}

I am a big supporter of web accessibility. You can read more about web accessibility in one of my previous posts: https://front-end.tips/8-important-tips-to-boost-your-websites-accessibility/

As you’ve seen, React is more than just its built-in features. It’s a playground where you can create your tools, like these custom hooks, to solve unique challenges in your projects. Don’t be afraid to experiment and build solutions that fit your project-specific needs.

May all your clicks be handled smoothly! 🚀

Learn more: