useKeyboard

Import

import { useKeyboard } from '@contentful/f36-utils';

Examples

Basic example

By passing ref of Stack element to useKeyboard hook, you create event listeners, listed in keys prop. When focus is inside the Stack element, and one of the listed keyboard actions is triggered, the callback is called. In this example, it's function handleEvent.

Hide code
() => {
  const ref = React.useRef(null);
  const handleEvent = (eventName, event) => console.log(eventName, event);

  useKeyboard({
    event: 'keydown',
    ref: ref,
    keys: {
      ArrowUp: (e) => handleEvent('ArrowUp', e),
      Tab: (e) => handleEvent('Tab', e),
    },
  });

  return (
    <Stack flexDirection="column" ref={ref}>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Stack>
  );
};
() => {
  const ref = React.useRef(null);
  const handleEvent = (eventName, event) => console.log(eventName, event);

  useKeyboard({
    event: 'keydown',
    ref: ref,
    keys: {
      ArrowUp: (e) => handleEvent('ArrowUp', e),
      Tab: (e) => handleEvent('Tab', e),
    },
  });

  return (
    <Stack flexDirection="column" ref={ref}>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Stack>
  );
};

Props (API reference)

Accessibility

This hook allows to implement keyboard accessibility according to many different requirements. To see most common interactions, check MDN Web Docs.