Implement useClickOutside() custom Hook in React [Interview]

Detecting click outside a specific element is one of the common use-cases in the react development, and this functionality can be simplified using a reusable useClickOutside custom hook in react.

In this blog, we will go through the useClickOutside hook implementation and its real-life use-case.

Implementation of useClickOutside Custom Hook

Let's quickly jump into the implementation of react useClickOutside hook that detects clicks outside a specified element.

 import { useEffect } from 'react';

// Custom Hook
const useClickOutside = (ref, callback) => {
    const handleClick = (e) => {
        if (ref.current && !ref.current.contains(e.target)) {
            callback();
        }
    };

    useEffect(() => {
        document.addEventListener('click', handleClick);

        return () => {
            document.removeEventListener('click', handleClick);
        };
    }, [ref, callback]);
};

export default useClickOutside;

Real-life Example of Using useClickOutside Hook

The useClickOutside custom hook can be used to handle scenarios where you want to close a dropdown, modal, or any other component when the user clicks outside of it.

Let's consider a simple example where we have a modal component that should close when the user clicks outside of the modal.

useClickOutside Hook in a Modal component

import React, { useRef } from 'react';
import useClickOutside from './useClickOutside';

const Modal = ({ onClose }) => {
    const modalRef = useRef(null);

    // Close the modal when clicking outside of it
    useClickOutside(modalRef, onClose);

    return (
        <div style={styles.overlay}>
            <div style={styles.modal} ref={modalRef}>
                <h2>Example Modal</h2>
                <p>This modal closes when you click outside of it.</p>
                <button onClick={onClose}>Close</button>
            </div>
        </div>
    );
};

const styles = {
    overlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        backgroundColor: 'rgba(0,0,0,0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    modal: {
        background: '#fff',
        padding: '20px',
        borderRadius: '8px',
        width: '300px',
        boxShadow: '0 0 10px rgba(0,0,0,0.3)',
    },
};

export default Modal;

Use modal component in the page

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
    const [open, setOpen] = useState(false);

    return (
        <div>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            {open && <Modal onClose={() => setOpen(false)} />}
        </div>
    );
};

export default App;

In this example, the Modal component will automatically close when the user clicks outside of it because of the usage of useClickOutside custom hook.

Conclusion

Not we have covered the implementation of useClickOutside custom hook in React to handle click events outside a specified element when working with components like modals, drop-downs, or popovers.

Understanding useClickOutside hook implementation will help you in react interview since this can be used in the implementation of multiple react component implementation questions.

Happy coding!