React Hook for Control + Key

useKeyboardShortcut.ts

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

export const useKeyboardShortcut = (key: string, callback: (keyEvent: KeyboardEvent) => void) => {
	const [pressed, setPressed] = useState(false)

	const keyPressHandler = useCallback(
		(ev: KeyboardEvent) => {
			if (ev.ctrlKey || ev.metaKey) {
				if (ev.key.toLowerCase() === key.toLowerCase()) {
					ev.preventDefault()
					ev.stopPropagation()
					ev.stopImmediatePropagation()
					if (ev.type === 'keydown' && !pressed) {
						callback(ev)
					}
					setPressed(ev.type === 'keydown')
				}
			}
		},
		[key, callback, pressed, setPressed]
	)

	useEffect(() => {
		if (keyPressHandler) {
			window.addEventListener('keydown', keyPressHandler)
			window.addEventListener('keyup', keyPressHandler)
			return () => {
				window.removeEventListener('keydown', keyPressHandler)
				window.removeEventListener('keyup', keyPressHandler)
			}
		}
	}, [keyPressHandler])
}