Using TypeScript

Works out of the box!

React Hotkeys Hook is written in TypeScript and therefore ready to go with our TypeScript project.

Examples

Using type safety to prevent the passing of parameters with an incorrect type.

import { useHotkeys } from "react-hotkeys-hook";
import { useState } from "React";

interface Props {
  hotKey: number;
}

const MyComponent = ({hotKey}: Props) => {
  const [count, setCount] = useState(0);

  // This will produce an error, because hotKey has to be of type string.
  useHotkeys(hotKey, () => setCount(prevCount => prevCount + 1));

  return (
    <div>
      The count is {count}.
    </div>
  )
}

---

Using TypeScript with refs.

import { useHotkeys } from "react-hotkeys-hook";
import { useState } from "React";

interface Props {
  hotKey: string;
}

const MyComponent = ({hotKey}: Props) => {
  const [count, setCount] = useState(0);

  const ref = useHotkeys<HTMLDivElement>(hotKey, () => setCount(prevCount => prevCount + 1));

  return (
    <div ref={ref}>
      The count is {count}.
    </div>
  )
}