import { useState , useEffect } from "react" ; const useKeyPress = ( targetKey1 , callback ) => { const [ key1Pressed , setKey1Pressed ] = useState < number | null > ( null ) ; useEffect ( ( ) => { if ( key1Pressed ) { callback ( ) ; } } , [ key1Pressed ] ) ; function downHandler ( { key } ) { if ( targetKey1 === key ) { const t = new Date ( ) . getTime ( ) ; setKey1Pressed ( t ) ; } } const upHandler = ( { key } ) => { if ( targetKey1 === key ) { setKey1Pressed ( null ) ; } } ; useEffect ( ( ) => { window . addEventListener ( "keydown" , downHandler ) ; window . addEventListener ( "keyup" , upHandler ) ; return ( ) => { window . removeEventListener ( "keydown" , downHandler ) ; window . removeEventListener ( "keyup" , upHandler ) ; } ; } , [ ] ) ; return ; } ; const useKeysPress2 = ( targetKey1 , targetKey2 , callback ) => { const [ key1Pressed , setKey1Pressed ] = useState < number | null > ( null ) ; const [ key2Pressed , setKey2Pressed ] = useState < number | null > ( null ) ; useEffect ( ( ) => { if ( key1Pressed && key2Pressed ) { callback ( ) ; } } , [ key1Pressed , key2Pressed ] ) ; function downHandler ( { key } ) { if ( targetKey1 === key ) { const t = new Date ( ) . getTime ( ) ; setKey1Pressed ( t ) ; } if ( targetKey2 === key ) { const t = new Date ( ) . getTime ( ) ; setKey2Pressed ( t ) ; } } const upHandler = ( { key } ) => { if ( targetKey1 === key ) { setKey1Pressed ( null ) ; } if ( targetKey2 === key ) { setKey2Pressed ( null ) ; } } ; useEffect ( ( ) => { window . addEventListener ( "keydown" , downHandler ) ; window . addEventListener ( "keyup" , upHandler ) ; return ( ) => { window . removeEventListener ( "keydown" , downHandler ) ; window . removeEventListener ( "keyup" , upHandler ) ; } ; } , [ ] ) ; return ; } ; export { useKeyPress , useKeysPress2 } ;