Useful React Hooks

useKeyDown.js

import { useEffect, useState } from 'react'

/**
 * Custom hook that listens for keydown events and triggers a callback when specified keys are pressed.
 *
 * @param {Function} callback - The function to call when one of the specified keys is pressed.
 * @param {Array<string>} keys - An array of key names to listen for.
 */
export default function useKeyDown(callback, keys) {
  const onKeyDown = (event) => {
    const wasAnyKeyPressed = keys.some((key) => event.key === key)
    if (wasAnyKeyPressed) {
      event.preventDefault()
      callback()
    }
  }
  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    return () => {
      document.removeEventListener('keydown', onKeyDown)
    }
  }, [onKeyDown])
}

// Usage
function Modal() {
  const [showModal, setShowModal] = useState(true)

  useKeyDown(() => {
    setShowModal(false)
  }, ['Escape'])
  
  if (!showModal) {
    return <></>
  }

  return (
    <div className="modal">
      <div className="modal__inner">
        { /* Content */ }
      </div>
    </div>
  )
}

useOutsideClick.js

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

/**
 * Hook that alerts clicks outside of the passed ref
 */
export default function useOutsideClick(ref, callback = () => {}) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback()
      }
    }
    // Bind the event listener
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [ref])
}

// Usage
function Modal() {
  const [showModal, setShowModal] = useState(true)
  const wrapperRef = useRef(null)

  useOutsideClick(wrapperRef, () => {
    setShowModal(false)
  })
  
  if (!showModal) {
    return <></>
  }

  return (
    <div className="modal">
      <div ref={wrapperRef} className="modal__inner">
        { /* Content */ }
      </div>
    </div>
  )
}