useKeyStroke#

import { useKeyDown } from '@react-hooks-library/core'
import { useState } from 'react'

function Demo() {
  const [posY, setPosY] = useState(0)

  useKeyDown(['w', 'W', 'ArrowUp'], (e) => {
    setPosY((y) => y - 20)
    e.preventDefault()
  })

  return <div style={{ transform: `translate(${posX}px, ${posY}px)` }}></div>
}

import {
  useKeyDown,
  useKeyPressed,
  useKeyUp,
  useKeyStroke
} from '@react-hooks-library/core'

function Demo() {
  useKeyStroke('Shift', () => console.log('pressed Shift'),
    {
      eventName: 'keypress'
      target: document
      passive: true
      }
    )

  useKeyDown('a', (e) => {
    console.log('a key down')
  })

  useKeyPressed('b', (e) => {
    console.log('b key presses')
  })

  useKeyUp('c', (e) => {
    console.log('c key up')
  })

  return null
}

import { useKeyDown } from '@react-hooks-library/core'

function Demo() {
  useKeyDown('Digit1', () => console.log('Keydown Digit 1'), {
    code: true
  })

  return null
}

declare type Keys = string | string[];
declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
declare type KeyStrokeOptions = {
    /** Key Stroke Event Name
     *
     * Can only be one of the following:
     *  - keydown
     *  - keypress
     *  - keyup
     */
    eventName?: KeyStrokeEventName;
    /** The DOM node to attach the event listener to
     * @default window
     */
    target?: MaybeRef<EventTarget>;
    /**
     * when `true` will use `event.code`
     *
     * when `false` will use `event.key`
     *
     * @default false
     */
    code?: boolean;
    /** TA boolean value that, if true,
     * indicates that the function specified by listener
     * will never call `preventDefault()`.
     *
     * @default window
     */
    passive?: false;
};

/**
 * Listen for keyboard keys being stroked.
 *
 * @param keys
 * @param handler
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useKeyStroke
 */
declare function useKeyStroke(
  keys: Keys,
  handler: (event: KeyboardEvent) => void,
  options?: KeyStrokeOptions
): _react_hooks_library_shared.Fn

/**
 * Listen for keyboard keys on keydown.
 *
 * @param keys
 * @param handler
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useKeyStroke
 */
declare function useKeyDown(
  keys: Keys,
  handler: (event: KeyboardEvent) => void,
  options?: KeyStrokeOptions
): _react_hooks_library_shared.Fn

/**
 * Listen for keyboard keys on keypress.
 *
 * @param keys
 * @param handler
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useKeyStroke
 */
declare function useKeyPressed(
  keys: Keys,
  handler: (event: KeyboardEvent) => void,
  options?: KeyStrokeOptions
): _react_hooks_library_shared.Fn

/**
 * Listen for keyboard keys on keyup.
 *
 * @param keys
 * @param handler
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useKeyStroke
 */
declare function useKeyUp(
  keys: Keys,
  handler: (event: KeyboardEvent) => void,
  options?: KeyStrokeOptions
): _react_hooks_library_shared.Fn