Как разработчик, вы могли столкнуться с необходимостью создания пользовательских сочетаний клавиш или горячих клавиш для навигации с помощью клавиатуры в своем веб-приложении. Хотя для этого доступно множество библиотек, Next.js со встроенной поддержкой TypeScript предоставляет отличную платформу для создания настраиваемых перехватчиков для обработки событий клавиатуры. В этом сообщении блога мы рассмотрим шаги по созданию пользовательского хука в Next.js с использованием TypeScript, который может обрабатывать события клавиатуры для пользовательских сочетаний клавиш.

Шаг 1: Настройка проекта

Чтобы создать наш собственный хук, нам понадобится проект Next.js, настроенный с помощью TypeScript. Если вы не знакомы с Next.js или TypeScript, вы можете обратиться к официальной документации, чтобы начать работу. После настройки проекта создайте новый файл с именем useKeyboardShortcut.ts в папке hooks вашего проекта.

Шаг 2: Создание крючка

В нашем файле useKeyboardShortcut.ts мы определим нашу пользовательскую функцию ловушки, которая будет принимать массив ключей и функцию обратного вызова в качестве параметров. Ключами в массиве могут быть любые из следующих значений: "ctrl", "shift", "alt" или строка, представляющая ключ. Параметр callback будет функцией, которая будет выполняться при срабатывании ярлыка. Вот как будет выглядеть наша пользовательская функция ловушки:

import { useEffect } from "react";

type Key = "ctrl" | "shift" | "alt" | string;

export const useKeyboardShortcut = (
  keys: Key[],
  callback: () => void
) => {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        keys.every(
          (key) =>
            (key === "ctrl" && event.ctrlKey) ||
            (key === "shift" && event.shiftKey) ||
            (key === "alt" && event.altKey) ||
            (typeof key === "string" && event.key.toLowerCase() === key)
        )
      ) {
        callback();
      }
    };

    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [keys, callback]);
};

Наша обновленная пользовательская функция ловушки использует ловушку useEffect для добавления и удаления прослушивателя событий для события keydown. Когда прослушиватель событий добавлен, мы определяем функцию обратного вызова с именем handleKeyDown, которая проверяет, соответствует ли каждая клавиша в массиве keys соответствующей клавише, нажатой пользователем.

Если все клавиши в ярлыке совпадают, выполняется функция callback.

Наконец, мы удаляем прослушиватель событий в функции очистки нашего хука useEffect, чтобы предотвратить утечку памяти.

Шаг 3: Использование крючка

Теперь, когда мы создали наш пользовательский хук, мы можем использовать его в любом компоненте, который должен обрабатывать пользовательские ярлыки. Допустим, у нас есть компонент с именем App, которому нужно обрабатывать пользовательский ярлык для сохранения файла. Вот как мы можем использовать наш пользовательский хук:

import { useKeyboardShortcut } from "../hooks/useKeyboardShortcut";

const App = () => {
  const handleSaveFile = () => {
    // Code to save the file
  };

  useKeyboardShortcut(["ctrl", "s"], handleSaveFile);

  // ...
};

В нашем компоненте App мы определяем функцию handleSaveFile, которая будет выполняться при нажатии комбинации клавиш "ctrl+s". Затем мы используем наш хук useKeyboardShortcut, чтобы добавить прослушиватель событий для комбинации клавиш "ctrl+s", передав наш массив

Давайте подключимся

Спасибо, что прочитали мою статью. Если вам нравится мой контент, рассмотрите возможность угостить меня кофе ☕.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Присоединяйтесь к нашему сообществу Discord и следите за нами в Twitter, LinkedIn и YouTube.

Узнайте, как привлечь внимание к своему стартапу с помощью Circuit.