- Notifications
You must be signed in to change notification settings - Fork0
React hook for traversing DOM elements with keyboard arrows.
License
NotificationsYou must be signed in to change notification settings
dcooney/react-use-arrows
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A React hook for traversing DOM elements with keyboard arrow keys.
# With npmnpm i react-use-arrows# With Yarnyarn add react-use-arrows
importReactfrom'react'importuseArrowsfrom'react-use-arrows'exportdefaultfunctionApp(){constmenuRef=useArrows();// Typescript.// const menuRef = useArrows() as React.RefObject<HTMLDivElement>return(<divref={menuRef}><ul><li><ahref="https://github.com/">Github</a></li><li><ahref="https://npmjs.com/">NPM</a></li><li><ahref="https://react.dev/">React</a></li></ul></div>)}
TheuseArrows 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 | AllowTab 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 |
constref=useArrows({selectors:['li[role="button"]','button'],useTab:false,});
About
React hook for traversing DOM elements with keyboard arrows.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published