Add hotkeys, autofocus input on mount

package.json

@@ -15,6 +15,7 @@
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hotkeys-hook": "^4.3.5",
     "react-icons": "^4.7.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-no-ssr": "^1.1.0",

src/pages/index.tsx

@@ -4,10 +4,12 @@ import Head from "next/head";
 import iconList from "@utils/iconList";
 import {useEffect, useMemo, useState} from "react";
 import {useDebounce} from "usehooks-ts";
+import { useHotkeys } from 'react-hotkeys-hook'
 import {AiOutlineLoading3Quarters} from "react-icons/ai";
 import IconCatalog from "@components/render/IconCatalog";
 import NoSSR from 'react-no-ssr';
 import InfiniteScroll from "react-infinite-scroll-component";
+import useFocus from "@utils/useFocus";
 
 export type IconIdentifierPair = { id: string, setId: string };
 const icons = iconList as IconIdentifierPair[];
@@ -38,7 +40,10 @@ const Home: NextPage = () => {
         setLazyIcons(icons.slice(0, 100))
     }, [allFilteredIcons]);
 
-
+    useHotkeys(['ctrl+k', 'ctrl+/'], () => {
+        focusSearch();
+    }, {preventDefault: true})
+    const [searchRef, focusSearch] = useFocus<HTMLInputElement>()
     const [lazyIcons, setLazyIcons] = useState<IconIdentifierPair[]>([]);
 
     return (
@@ -51,6 +56,8 @@ const Home: NextPage = () => {
             <main className="flex flex-col items-center m-auto p-6 max-w-[100ch]">
                 <div className="flex max-w-[60ch] px-1 py-2 m-4">
                     <input
+                        ref={searchRef}
+                        autoFocus
                         className="grow bg-transparent ring-0 outline-none text-xl"
                         placeholder="Search for an icon..."
                         onChange={({target: {value}}) => setQuery(value)}

src/utils/useFocus.ts

@@ -0,0 +1,12 @@
+import {type RefObject, useRef} from "react";
+
+const useFocus = <ElementReference extends HTMLInputElement>(): [RefObject<ElementReference>, () => void] => {
+    const elementReference = useRef<ElementReference>(null)
+    const setFocus = () => {
+        elementReference.current?.focus()
+    }
+
+    return [elementReference, setFocus]
+}
+
+export default useFocus;

yarn.lock

@@ -2146,6 +2146,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hotkeys-hook@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-4.3.5.tgz#d77d62b839f54042d255bc111878967fd4958253"
+  integrity sha512-tfwTwKP3ga7n4naNS/JOByaEwEkTCoXYCepDuhXpj8mBx+sFszV5JecRWM2dv+PbOowmmBpHAFtTXTnG/p8UkQ==
+
 react-icons@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.7.1.tgz#0f4b25a5694e6972677cb189d2a72eabea7a8345"