🎣 React arrow key navigation hook

Have you ever implemented a dropdown or an autofill you wish could be keyboard navigable? Of course you can use the tab keys, but that's not always what users expect.

The React Arrow Key Navigation Hook is a lightweight React hook to add dom-based arrow key navigation through any component.

Usage

You may either use the React hook, or the DOM-based functions provided.

To enable keyboard navigation on links, buttons and input elements:

1import useArrowKeyNavigationHook from "react-arrow-key-navigation-hook";
2
3function MyComponent() {
4  const parentRef = useArrowKeyNavigationHook({ selectors: "a,button,input" });
5
6  return <div ref={parentRef}>...</div>;
7}

If you have specific requirements, you can adjust the selector to only operate on specific class names or selectors of your choosing.

Usage outside of React

You can use the functionality independently of React:

1import handleEvents from "react-arrow-key-navigation-hook/dist/handleEvents";
2
3const eventHandler = (event) => {
4  handleEvents({
5    event,
6    parentNode: document.querySelector("myNode"),
7    selectors: "a,button,input",
8  });
9};
10document.addEventListener("keydown", eventHandler);