# boundless-arrow-key-navigation

> A higher-order component for arrow key navigation on a grouping of children.

Latest version **1.1.0** (published 2017-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install boundless-arrow-key-navigation
pnpm add boundless-arrow-key-navigation
yarn add boundless-arrow-key-navigation
bun add boundless-arrow-key-navigation
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-06-06 |
| First published | 2017-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 239 |
| Maintainers | probablyup |
| Keywords | react, hoc, keyboard, boundless |

## Links

- npm: https://www.npmjs.com/package/boundless-arrow-key-navigation
- Repository: https://github.com/enigma-io/boundless
- Homepage: https://boundless.js.org/ArrowKeyNavigation
- Issues: https://github.com/enigma-io/boundless/issues
- npm.io page: https://npm.io/package/boundless-arrow-key-navigation

## Dependencies (2)

- [boundless-utils-uuid](https://npm.io/package/boundless-utils-uuid.md) ^1.1.0
- [boundless-utils-omit-keys](https://npm.io/package/boundless-utils-omit-keys.md) ^1.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-06-06
- 1.0.4 — 2017-03-14
- 1.0.3 — 2017-02-20
- 1.0.2 — 2017-02-09
- 1.0.1 — 2017-02-07
- 1.0.0 — 2017-02-07
- 1.0.0-beta.7 — 2017-02-04
- 1.0.0-beta.6 — 2017-01-26
- 1.0.0-beta.5 — 2017-01-26
- 1.0.0-beta.4 — 2017-01-25
- 1.0.0-beta.3 — 2017-01-25

## README

<!---
THIS IS AN AUTOGENERATED FILE. EDIT PACKAGES/BOUNDLESS-ARROW-KEY-NAVIGATION/INDEX.JS INSTEAD.
-->
# 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 `<ArrowKeyNavigation ...>` 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 (
            <div className='spread'>
                <section>
                    <h6>Horizontal-only</h6>
                    <ArrowKeyNavigation className='demo-loose-list' mode={ArrowKeyNavigation.mode.HORIZONTAL}>
                        {this.state.items.map((item) => <span key={item}>{item}</span>)}
                    </ArrowKeyNavigation>
                </section>

                <section>
                    <h6>Vertical-only</h6>
                    <ArrowKeyNavigation component='ul' mode={ArrowKeyNavigation.mode.VERTICAL}>
                        {this.state.items.map((item) => <li key={item}>{item}</li>)}
                    </ArrowKeyNavigation>
                </section>

                <section>
                    <h6>Both directions</h6>
                    <ArrowKeyNavigation component='ol' mode={ArrowKeyNavigation.mode.BOTH}>
                        {this.state.items.map((item) => <li key={item}>{item}</li>)}
                    </ArrowKeyNavigation>
                </section>

                <section>
                    <h6>Second child active by default</h6>
                    <ArrowKeyNavigation component='ul' mode={ArrowKeyNavigation.mode.VERTICAL} defaultActiveChildIndex={1}>
                        {this.state.items.map((item) => <li key={item}>{item}</li>)}
                    </ArrowKeyNavigation>
                </section>

                <section>
                    <h6>Ignored child (horizontal rule)</h6>
                    <ArrowKeyNavigation>
                        <div>lorem</div>
                        <hr tabIndex='-1' />
                        <div>dolor</div>
                    </ArrowKeyNavigation>
                </section>
            </div>
        );
    }
}
```



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

- __`*`__ &middot; any [React-supported attribute]
  (https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes)

  Expects | Default Value
  ---     | ---
  `any` | `n/a`

- __`component`__ &middot; 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`__ &middot; allows for a particular child to be initially reachable via tabbing; only applied during first render

  Expects | Default Value
  ---     | ---
  `number` | `0`

- __`mode`__ &middot; 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`

---
_Source: https://npm.io/package/boundless-arrow-key-navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._