View Source

ArrowKeyNavigation

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

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#

npm i --save boundless-arrow-key-navigation

ArrowKeyNavigation can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { ArrowKeyNavigation } from 'boundless';

Demo

Horizontal-only
loremipsumdolor
Vertical-only
  • lorem
  • ipsum
  • dolor
Both directions
  1. lorem
  2. ipsum
  3. dolor
Second child active by default
  • lorem
  • ipsum
  • dolor
Ignored child (horizontal rule)
lorem

dolor
Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string or function
Default Value
'div'

Any valid HTML tag name or a React component factory, anything that can be passed as the first argument to React.createElement

defaultActiveChildIndex
Expects
number
Default Value
0

Allows for a particular child to be initially reachable via tabbing; only applied during first render

mode
Expects
ArrowKeyNavigation.mode.BOTH or
ArrowKeyNavigation.mode.HORIZONTAL or
ArrowKeyNavigation.mode.VERTICAL
Default Value
ArrowKeyNavigation.mode.BOTH

controls which arrow key events are captured to move active focus within the list:

ModeKeys
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.