ホットキー(ショートカット)

1import React, { FC } from 'react';
2import { useHotkeys } from 'react-hotkeys-hook';
3import { IconType } from 'react-icons';
4import { SiApple, SiWindows } from 'react-icons/si';
5
6const Hotkey = () => {
7  useHotkeys('ctrl+s, cmd+s', (e) => {
8    e.preventDefault();
9    alert('記事を保存しました');
10  });
11
12  return (
13    <div className="flex gap-6">
14      <Key hotkey="⌘ S" Logo={SiApple}></Key>
15      <Key hotkey="Ctrl S" Logo={SiWindows}></Key>
16    </div>
17  );
18};
19
20export default Hotkey;
21
22const Key: FC<{
23  hotkey: string;
24  Logo: IconType;
25}> = ({ hotkey, Logo }) => {
26  return (
27    <div className="inline-flex text-gray-300 overflow-hidden border border-gray-700 rounded-md bg-slate-500">
28      <span className="bg-slate-700 flex text-sm items-center px-2">
29        <Logo />
30      </span>
31      <span className="px-3 py-1">{hotkey}</span>
32    </div>
33  );
34};

使用ライブラリ

なし

参考サイト

なし