React: Overriding Browser's Keyboard Shortcuts

Browsers have many shortcuts. How do I override these shortcuts?

---

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.key === "1") {
        alert("shortcut");
      }
    };
    window.addEventListener("keyup", handler);

    return () => {
      window.removeEventListener("keyup", handler);
    };
  }, []);

  return <div className="App">App</div>;
}

export default App;

keypress doesn't work in complex shortcuts like ctrl + Key, so I used keyup.

This code will make an alert when you press the shortcut ctrl + 1. But it won't work because ctrl + 1 is a reserved key to move to the first tab.

In this case, you can ignore default shortcuts by using preventDefault in keydown.

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const ctrl1 = (e: KeyboardEvent) => e.ctrlKey && e.key === "1";

    const handler = (e: KeyboardEvent) => {
      if (ctrl1(e)) {
        alert("shortcut");
      }
    };

    const ignore = (e: KeyboardEvent) => {
      if (ctrl1(e)) {
        e.preventDefault();
      }
    };

    window.addEventListener("keyup", handler);
    window.addEventListener("keydown", ignore);

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

  return <div className="App">App</div>;
}

export default App;

When a key that you want to bound is pressed, call preventDefault. It will prevent to make a default action.

But it's not possible to override some keys like ctrl + R(Refresh).

And if you want, you can make this as a component.

import { useEffect } from "react";

const Ctrl1 = ({ onPress }: { onPress: VoidFunction }) => {
  useEffect(() => {
    const ctrl1 = (e: KeyboardEvent) => e.ctrlKey && e.key === "1";

    const handler = (e: KeyboardEvent) => {
      if (ctrl1(e)) onPress();
    };

    const ignore = (e: KeyboardEvent) => {
      if (ctrl1(e)) e.preventDefault();
    };

    window.addEventListener("keyup", handler);
    window.addEventListener("keydown", ignore);

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

  return null;
};

function App() {
  return (
    <div className="App">
      <Ctrl1 onPress={() => alert("pressed ctrl1")} />
      App
    </div>
  );
}

export default App;

The logic is the same but I think it looks more like the React way.

That's it. Thanks for reading this post.
Good coding :)

Comments

[Jon Randy 🎖️]

You really, really shouldn't override browser keyboard shortcuts unless you have a very good reason. This is a sure-fire way to annoy your users, and create accessibility issues

[SeongKuk Han]

You're right. I totally agree with you. I'm also used to the keys.
It might help someone who has a good reason or has to do. ( like this webapp photopea.com/ )
Thank you for commenting :) Good coding!

[Ricardo Magalhães]

Well, many well known websites does that, specially dev related one, when it comes for example for the Ctrl + K shortcut. You just need to know which shortcuts to change.