useKeyBindings

About

useKeyBindings can bind pairs of keyboard events and handlers.

Examples

import "./styles.css";
import { useKeyBindings, useCounter } from "rooks";

export default function App() {
  const { value, increment, incrementBy, decrementBy, reset } = useCounter(0);
  const cb1 = () => increment();
  const cb2 = () => decrementBy(3);
  const cb3 = () => incrementBy(5);
  const cb4 = () => reset();

  useKeyBindings({ a: cb1, b: cb2, Enter: cb3, Escape: cb4 });

  return (
    <div>
      <p>
        Counter value is : <strong>{value}</strong>
      </p>
    </div>
  );
}

Arguments

ArgumentTypeDescriptionDefault value
keyBindingsObjectpairs of keyboard events and handlers
optionsOptionsrefer to useKey

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel