# ArrowKeyNavigation ArrowKeyNavigation is designed not to care about the component types it is wrapping. Due to this, you can pass whatever HTML tag you like into `props.component` or even a React component you've made elsewhere. Additional props passed to `` will be forwarded on to the component or HTML tag name you've supplied. The children, similarly, can be any type of component. ## Installation ```bash npm i boundless-arrow-key-navigation --save ``` Then use it like: ```jsx /** @jsx createElement */ import { createElement, PureComponent } from 'react'; import ArrowKeyNavigation from 'boundless-arrow-key-navigation'; export default class ArrowKeyNavigationDemo extends PureComponent { state = { items: [ 'lorem', 'ipsum', 'dolor' ], } render() { return (
Horizontal-only
{this.state.items.map((item) => {item})}
Vertical-only
{this.state.items.map((item) =>
  • {item}
    • )}
    Both directions
    {this.state.items.map((item) =>
  • {item}
    • )}
    Second child active by default
    {this.state.items.map((item) =>
  • {item}
    • )}
    Ignored child (horizontal rule)
    lorem
    dolor
    ); } } ``` ArrowKeyNavigation can also just be directly used from the main [Boundless library](https://www.npmjs.com/package/boundless). This is recommended when you're getting started to avoid maintaining the package versions of several components: ```bash npm i boundless --save ``` the ES6 `import` statement then becomes like: ```js import { ArrowKeyNavigation } from 'boundless'; ``` ## Props > Note: only top-level props are in the README, for the full list check out the [website](https://boundless.js.org/ArrowKeyNavigation). ### Required Props There are no required props. ### Optional Props - __`*`__ · any [React-supported attribute] (https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes) Expects | Default Value --- | --- `any` | `n/a` - __`component`__ · any valid HTML tag name or a React component factory, anything that can be passed as the first argument to `React.createElement` Expects | Default Value --- | --- `string or function` | `'div'` - __`defaultActiveChildIndex`__ · allows for a particular child to be initially reachable via tabbing; only applied during first render Expects | Default Value --- | --- `number` | `0` - __`mode`__ · controls which arrow key events are captured to move active focus within the list: Mode | Keys ---- | ---- `ArrowKeyNavigation.mode.BOTH` | ⬅️ ➡️ ⬆️ ⬇️ `ArrowKeyNavigation.mode.HORIZONTAL` | ⬅️ ➡️ `ArrowKeyNavigation.mode.VERTICAL` | ⬆️ ⬇️ _Note: focus loops when arrowing past one of the boundaries; tabbing moves the user away from the list._ Expects | Default Value --- | --- `ArrowKeyNavigation.mode.BOTH or ArrowKeyNavigation.mode.HORIZONTAL or ArrowKeyNavigation.mode.VERTICAL` | `ArrowKeyNavigation.mode.BOTH`