Detect a click outside of a component using onBlur

Let's assume that you want to create a modal that disappears on an outside click.

import React, { useEffect, useState } from 'react'

const Modal = () => {
    const [show, setShow] = useState(true)
    useEffect(() => {
    }, [show])
    const handleBlur = (e) => {
        if (!event.currentTarget.contains(event.relatedTarget)){



    return show
    ? <div id = 'Modal' onBlur = {handleBlur} tabindex = '1'>
        <p>This is a modal</p>
    : null

As the modal is a div, you need to add tabindex = '1' to allow focusing. tabindex = '1' and document.getElementById('Modal') are for divs the equivalent of autoFocus for input elements.

Every time you show the modal, you refocus it.

When there is a blur event, check if the new target isn't part of the modal component. If it doesn't, you hide it.

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.