react-arrow-key-navigation-hook
Advanced tools
Weekly downloads
Readme
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.
You may either use the React hook, or the DOM-based functions provided.
To enable keyboard navigation on links, buttons and input elements:
import useArrowKeyNavigationHook from "react-arrow-key-navigation-hook";
function MyComponent() {
const parentRef = useArrowKeyNavigationHook({ selectors: "a,button,input" });
return <div ref={parentRef}>...</div>;
}
If you have specific requirements, you can adjust the selector to only operate on specific class names or selectors of your choosing.
You can use the functionality independently of React:
import handleEvents from "react-arrow-key-navigation-hook/dist/handleEvents";
const eventHandler = (event) => {
handleEvents({
event,
parentNode: document.querySelector("myNode"),
selectors: "a,button,input",
});
};
document.addEventListener("keydown", eventHandler);
FAQs
A React hook & associated functions to implement arrow key navigation through a component
The npm package react-arrow-key-navigation-hook receives a total of 401 weekly downloads. As such, react-arrow-key-navigation-hook popularity was classified as not popular.
We found that react-arrow-key-navigation-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.