React Keyboard Navigation

A simple react component to enable keyboard navigation through it's child components.

Installation

1yarn add react-arrow-nav

OR

1npm install react-arrow-nav

Usage

Import Component

1import ArrowNav from "react-arrow-nav";
2
3class TodoItem extends React.Component {
4  render() {
5    <ArrowNav>
6      <div>Item 1</div>
7      <div>Item 2</div>
8      <FancyItem>Item 3</FancyItem>
9    </ArrowNav>;
10  }
11}
12
13function FancyItem({ tabIndex, children }) {
14  return (
15    <button {...fancyProps} tabIndex={tabIndex}>
16      {children}
17    </button>
18  );
19}

Props

• mode

  The direction of keyboard navigation.

  default : ArrowNav.VERTICAL

  values = [ ArrowNav.VERTICAL , ArrowNav.HORIZONTAL , ArrowNav.BOTH ]

• ...any other prop will be passed to the wrapping div element.

If the child elements are not DOM elements, make sure they pass down tabIndex prop to the DOM element