src/components/ToggleShifter.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import Shifter from './Shifter.tsx';
import { useEffect, useState } from "react";

export default function ToggleShifter() {
  const [isShowingShifter, setShowingShifter] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "s") {
        setShowingShifter(prev => !prev);
      }
    };

    window.addEventListener("keydown", handleKeyDown);

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

  return (
    <>
      {isShowingShifter && <Shifter />}
    </>
  );
}