useClickAway

Category

Sensors

Export Size

600 B

Last Changed

5 days ago

Fire a handler when a click lands outside one or more target elements.

Demo

Usage

import { useClickAway } from '@reause/core'
import { useRef, useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

  useClickAway(ref, () => setOpen(false))

  return (
    <div>
      <button type="button" onClick={() => setOpen(value => !value)}>Toggle</button>
      {open && <div ref={ref}>Click outside of me to close</div>}
    </div>
  )
}

Several targets, and other events — every name is registered and removed symmetrically:

useClickAway([ref1, ref2], () => setOpen(false))
useClickAway(ref, () => setOpen(false), 'mousedown')
useClickAway(ref, () => setOpen(false), ['mousedown', 'touchstart'])

The handler is read through a latest-value ref, so an inline arrow never re-registers the listeners; only a change of the resolved target does. The hook returns void.

Type Declarations

type DocumentEventKey = keyof DocumentEventMap

export function useClickAway<T extends Element>(target: RefObject<T | null> | RefObject<T | null>[], handler: (event: Event) => void, eventName?: DocumentEventKey | DocumentEventKey[]): void

Source

Source · Demo · ahooks

Contributors

Changelog

v0.1.6 on

f3736 - feat(core): add useClickAway (#948)