diff --git a/package.json b/package.json index 4fa8332..ced9a34 100644 --- a/package.json +++ b/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", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5ba72fb..6ad7c87 100644 --- a/src/pages/index.tsx +++ b/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() const [lazyIcons, setLazyIcons] = useState([]); return ( @@ -51,6 +56,8 @@ const Home: NextPage = () => {
setQuery(value)} diff --git a/src/utils/useFocus.ts b/src/utils/useFocus.ts new file mode 100644 index 0000000..1e5b4a6 --- /dev/null +++ b/src/utils/useFocus.ts @@ -0,0 +1,12 @@ +import {type RefObject, useRef} from "react"; + +const useFocus = (): [RefObject, () => void] => { + const elementReference = useRef(null) + const setFocus = () => { + elementReference.current?.focus() + } + + return [elementReference, setFocus] +} + +export default useFocus; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index c880c4a..01fb10c 100644 --- a/yarn.lock +++ b/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"