Package Exports

boundless-arrow-key-navigation
boundless-arrow-key-navigation/build

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (boundless-arrow-key-navigation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.

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.

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

Name Type Default Value Description

component

string or function

'div'

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

defaultActiveChildIndex

number

Allows for a particular child to be initially reachable via tabbing

mode

ArrowKeyNavigation.mode.BOTH or
ArrowKeyNavigation.mode.HORIZONTAL or
ArrowKeyNavigation.mode.VERTICAL

ArrowKeyNavigation.mode.BOTH

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.