react-use-arrows

A React hook for traversing DOM elements with keyboard arrow keys.

Install

# With npm
npm i react-use-arrows

# With Yarn
yarn add react-use-arrows

Usage

import React from 'react'
import useArrows from 'react-use-arrows'

export default function App() {
   const menuRef = useArrows();

   // Typescript.
   // const menuRef = useArrows() as React.RefObject<HTMLDivElement>

   return (
      <div ref={menuRef}>
         <ul>
            <li>
               <a href="https://github.com/">Github</a>
            </li>
            <li>
               <a href="https://npmjs.com/">NPM</a>
            </li>
            <li>
               <a href="https://react.dev/">React</a>
            </li>
         </ul>
      </div>
   )
}

Options

The useArrows hook accepts an optional object parameter which is a collection of configuration props.

Prop	Description	Default	Type
selectors	DOM element selectors that should receive focus.	List	Array|String
useTab	Allow Tab key to navigate focusable elements.	true	Boolean
useUpDown	Up and down arrows navigate focusable elements.	true	Boolean
useLeftRight	Left and right arrows navigate focusable elements.	false	Boolean
loop	Loop through focusable elements.	true	Boolean

const ref = useArrowControls( { 
   selectors: 'span[role="button"]',
   useTab: false,
});