useKeyPress

useKeyPress is a custom hook to listen for keyboard input.

Return value

The useKeyPress hook returns a boolean, true if the key being watched is pressed.

Import

import { useKeyPress } from '@sajari-ui/core';

import { useKeyPress } from '@sajari-ui/core';

Usage

Editable Example

⌘

s

are not pressed

function Example() {
  const pressed = useKeyPress('s', { preventDefault: true, modifiers: { meta: true } });

  return (
    <Flex
      alignItems="items-center"
      backgroundColor={pressed ? 'bg-green-500' : 'bg-red-500'}
      textColor="text-white"
      transitionProperty="transition-all"
      transitionDuration="duration-200"
      borderRadius="rounded"
      margin="mt-4"
      padding={['px-4', 'py-2']}
    >
      <Icon name={pressed ? 'check' : 'close'} margin="mr-3" />
      <Text as="kbd">⌘</Text>
      <Text margin="mx-1">+</Text>
      <Text as="kbd">s</Text>
      <Text margin="ml-2"> are {pressed ? 'pressed' : 'not pressed'}</Text>
    </Flex>
  );
}

function Example() {
  const pressed = useKeyPress('s', { preventDefault: true, modifiers: { meta: true } });
  return (
    <Flex
      alignItems="items-center"
      backgroundColor={pressed ? 'bg-green-500' : 'bg-red-500'}
      textColor="text-white"
      transitionProperty="transition-all"
      transitionDuration="duration-200"
      borderRadius="rounded"
      margin="mt-4"
      padding={['px-4', 'py-2']}
    >
      <Icon name={pressed ? 'check' : 'close'} margin="mr-3" />
      <Text as="kbd">⌘</Text>
      <Text margin="mx-1">+</Text>
      <Text as="kbd">s</Text>
      <Text margin="ml-2"> are {pressed ? 'pressed' : 'not pressed'}</Text>
    </Flex>
  );
}