boundless-arrow-key-navigation
v1.1.0
Published
A higher-order component for arrow key navigation on a grouping of children.
Downloads
29,536
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
<tr>
<td>component</td>
<td><pre><code>string or function</code></pre></td>
<td><pre><code class="language-js">'div'</code></pre></td>
<td>Any valid HTML tag name or a React component factory, anything that can be passed as the first argument to `React.createElement`</td>
</tr>
<tr>
<td>defaultActiveChildIndex</td>
<td><pre><code>number</code></pre></td>
<td><pre><code class="language-js">0</code></pre></td>
<td>Allows for a particular child to be initially reachable via tabbing</td>
</tr>
<tr>
<td>mode</td>
<td><pre><code>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.