React useEvent hook

useBlur.ts

import { RefObject } from 'react'
import useEvent from './useEvent'

type Ref = RefObject<Element>

const useBlur = (ref: Ref, callback: () => void) => {
  useEvent(ref, 'blur', () => setTimeout(callback))
}

export default useBlur

useEvent.ts

import { useEffect, RefObject } from 'react'

type Target = Element | Document
type Ref<E extends Target> = RefObject<E>
type Args<E extends Target> = Parameters<E['addEventListener']>

const useEvent = <E extends Target>
  (ref: Ref<E>, ...[type, listener, options]: Args<E>) => {
    useEffect(() => {
      const target = ref.current
      
      target && target.addEventListener(type, listener, options)

      return () => {
        target && target.removeEventListener(type, listener, options)
      }
    })
  }

export default useEvent