useOnOutsideClick

import React from 'react'
import {useOnOutsideClick} from '@primer/react'


export default function Default() {
  const [isOpen, setIsOpen] = React.useState(true)
  const containerRef = React.useRef(null)


  const closeOverlay = React.useCallback(() => {
    setIsOpen(false)
  }, [setIsOpen])


  const showOverlay = React.useCallback(() => {
    setIsOpen(true)
  }, [setIsOpen])


  useOnOutsideClick({onClickOutside: closeOverlay, containerRef})


  return (
    <>
      <button onClick={showOverlay}>Toggle demo content</button>
      {isOpen && (
        <div ref={containerRef} style={{border: '1px solid', margin: '1rem', padding: '1rem'}}>
          Click outside of this div to hide it
        </div>
      )}
    </>
  )
}

import React from 'react'
import {useOnOutsideClick} from '@primer/react'


export default function Default() {
  const [isOpen, setIsOpen] = React.useState(true)
  const containerRef = React.useRef(null)
  const triggerRef = React.useRef(null)
  const ignoredRef = React.useRef(null)


  const closeOverlay = React.useCallback(() => {
    setIsOpen(false)
  }, [setIsOpen])


  const toggleOverlay = React.useCallback(() => {
    setIsOpen(!isOpen)
  }, [setIsOpen, isOpen])


  useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [triggerRef, ignoredRef]})


  return (
    <>
      <div style={{display: 'flex', gap: '1rem'}}>
        <button ref={triggerRef} onClick={toggleOverlay}>
          Toggle demo content
        </button>
        <button ref={ignoredRef}>Clicking here will not hide toggled content</button>
      </div>
      {isOpen && (
        <div ref={containerRef} style={{border: '1px solid', margin: '1rem', padding: '1rem'}}>
          Click outside of this div to close the overlay
        </div>
      )}
    </>
  )
}