@odnh/use-keypress v0.0.1

useKeyPress

Returns the key value when the key is pressed.

Install

yarn add @odnh/use-keypress
# or 
npm install @odnh/use-keypress

Use

  useKeyPress(selector?: Selector, target?: Target) => Selector[];

parameters

type EventKey = 'code' | 'keyCode' | 'key' | 'which';

returns

EventKey[]

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);
  }, []);
  React.useEffect(() => {
    if(
      pressingCodes.includes('ControlLeft') &&
      pressingCodes.includes('KeyZ') {
        setSentenceIndex(prev => (
          prev > 0 ? prev-1 : prev;
        ));
      }
    )
  }, [pressingCodes])

  return (
    <>
      <p>{SENTENCE_LIST[sentenceIndex]}</p>
      <button onClick={nextSentence}>next</button>
    </>
  )
}