[](https://github.com/semantic-release/semantic-release) [](https://www.npmjs.com
npm install use-keyboard-list-navigation  
A React hook to navigate through lists with your keyboard.
``bash`
yarn add use-keyboard-list-navigation
`javascript
import React from "react";
import { useKeyboardListNavigation } from "use-keyboard-list-navigation";
const App: React.FC = () => {
const list = ["one", "two", "three"];
const { index, cursor, interactive, selected } = useKeyboardListNavigation({
list,
onEnter: console.log.bind(console),
});
return (
{JSON.stringify({ index, cursor, interactive, selected })}
Interface
`typescript
type UseKeyboardListNavigationProps = {
ref?: React.MutableRefObject | undefined;
list: T[];
waitForInteractive?: boolean | undefined;
defaultValue?: T | undefined;
bindAxis?: "vertical" | "horizontal" | "both" | undefined;
onEnter({
event,
element,
state,
index,
}: {
event: KeyboardEvent;
element: T;
state: UseKeyboardListNavigationState;
index: number;
}): void;
extractValue?(item: T): string;
};const useKeyboardListNavigation: ({
ref,
list,
waitForInteractive,
defaultValue,
onEnter,
extractValue,
}: UseKeyboardListNavigationProps) => {
index: number;
selected: T;
cursor: number;
length: number;
interactive: boolean;
};
``