Привязки клавиш в React

Привязки клавиш могут значительно улучшить взаимодействие с пользователем, позволяя конечному пользователю быстро перемещаться, используя только клавиатуру.

Реализация привязок клавиш в вашем приложении React может сделать его более доступным и простым в использовании для пользователей с ограниченными возможностями, а также улучшить общее взаимодействие с пользователем.

В этой статье мы рассмотрим создание обычного хука React, который может более четко управлять всеми привязками клавиш. Мы также рассмотрим простую библиотеку, которую вы можете использовать напрямую, поэтому вам не нужно писать хук самостоятельно.

Давайте начнем с создания привязки хука.

import { useEffect } from "react";

interface KeyBinding {
  cmd: string[],
  callback: () => any,
}

export const useKeybindings = (props: KeyBinding[]) => {
  const currentlyPressedKeys = new Set();

  const areAllKeyPressed = (keys: string[]) => {
    for (const key of keys) {
      if (!currentlyPressedKeys.has(key)) return false;
    }
    return true;
  }

  const bindingsKeyDown = (e: KeyboardEvent) => {
    currentlyPressedKeys.add(e.key);
    props.forEach((binding) => {
      if (areAllKeyPressed(binding.cmd)) {
        binding.callback();
      }
    });

  };

  const bindingsKeyUp = (e: KeyboardEvent) => {
    currentlyPressedKeys.delete(e.key);
  }

  useEffect(() => {
    document.addEventListener("keydown", bindingsKeyDown);
    document.addEventListener("keyup", bindingsKeyUp);
    return () => {
      document.removeEventListener("keydown", bindingsKeyDown);
      document.removeEventListener("keyup", bindingsKeyUp);
    };
  }, []);
};

Приведенный выше хук добавляет прослушиватель событий для событий keydown и keyup. Для нескольких нажатий клавиш мы создаем набор, содержащий все нажатые клавиши, и выполняем обратный вызов всякий раз, когда нажимаются все назначенные клавиши для этой конкретной привязки.

Как вы можете видеть в реализации, мы используем константу keyboardKeys, где мы можем получить доступ к ключевым значениям. Это объект, содержащий все коды клавиш, которые могут нам понадобиться для привязки клавиш.

Теперь, когда у нас есть хук, давайте используем его в компоненте React.

import { keyboardKeys, useKeybindings } from '@harshsinghatz/react-key-bindings';
import { useState } from 'react';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  }

  const closeModal = () => {
    setIsModalOpen(false);
  }

  useKeybindings([
    { cmd: [keyboardKeys.KeyA, keyboardKeys.BracketLeft], callback: openModal },
    { cmd: [keyboardKeys.KeyC, keyboardKeys.BracketLeft], callback: closeModal },
  ])

  return (
    <div className="App">
      Modal State: {isModalOpen ? "modal open" : "modal close"}
    </div>
  )
}

export default App;

В этом примере мы создали простой компонент с двумя обратными вызовами, openModal и closeModal. Затем мы передали эти обратные вызовы хуку useKeybindings вместе с массивом привязок клавиш. Всякий раз, когда нажимается указанная комбинация клавиш, будет выполняться соответствующий обратный вызов.

Обратите внимание, что коды клавиш, используемые в этом примере, являются лишь некоторыми из многих доступных кодов клавиш. Вы можете найти полный список кодов клавиш в перечислении keyboardKeys.

Вот и все! Теперь у вас есть более чистый способ управления привязками клавиш в вашем приложении React.

Если вы не хотите создавать хук самостоятельно, вы можете использовать созданный мной облегченный пакет под названием @harshsinghatz/react-key-bindings.

Ссылка: https://www.npmjs.com/package/@harshsinghatz/react-key-bindings.

Вы можете связаться со мной в Twitter, LinkedIn и Instagram. Мои личные сообщения открыты круглосуточно и без выходных.