Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-arrow-key-navigation-hook

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Issues
File Explorer

Advanced tools

react-arrow-key-navigation-hook

A React hook & associated functions to implement arrow key navigation through a component

    1.0.2latest
    GitHub

Version published
Maintainers
1
Weekly downloads
478
increased by33.52%

Weekly downloads

Readme

Source

🎣 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:

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.

Usage outside of React

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);

Keywords

FAQs

Last updated on 31 Mar 2021

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.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc