Как разработчик, вы могли столкнуться с необходимостью создания пользовательских сочетаний клавиш или горячих клавиш для навигации с помощью клавиатуры в своем веб-приложении. Хотя для этого доступно множество библиотек, 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.