README
useKeyPress
Returns the key value when the key is pressed.
Install
yarn add @odnh/use-keypress
# or
npm install @odnh/use-keypress
Use
useKeyPress<S = string, T = HTMLBodyElement>(selector?: Selector<T>, target?: Target<T>) => S[];
parameters
Name | Type | defaultValue | description |
---|---|---|---|
selector | Selector |
(event) => event.code |
select value of event |
target | HTMLElement or React.MutableRefObject |
body |
event target element |
type Selector<S = string> = (event: KeyboardEvent) => S;
return
list of values contained by selector
Example
import React from 'react';
import useKeyPress from '@odnh/use-keypress';
const SENTENCE_LIST = ['hi', 'bye'];
const App = () => {
const [sentenceIndex, setSentenceIndex] = React.useState(0);
const pressingCodes = useKeyPress();
const nextSentence = React.useCallback(() => {
setSentenceIndex(prev => prev+1);
}, [setSentenceIndex]);
React.useEffect(() => {
if(
pressingCodes.includes('ControlLeft') &&
pressingCodes.includes('KeyZ') {
setSentenceIndex(prev => (
prev > 0 ? prev-1 : prev;
));
}
)
}, [pressingCodes, setSentenceIndex])
return (
<>
<p>{SENTENCE_LIST[sentenceIndex]}</p>
<button onClick={nextSentence}>next</button>
</>
)
}