https://github.com/dzucconi/use-keyboard-list-navigation

A React hook to navigate through lists with your keyboard
https://github.com/dzucconi/use-keyboard-list-navigation

keyboard react react-hook react-hooks typescript

Last synced: 6 months ago
JSON representation

A React hook to navigate through lists with your keyboard

• Host: GitHub
• URL: https://github.com/dzucconi/use-keyboard-list-navigation
• Owner: dzucconi
• License: mit
• Created: 2020-02-05T18:56:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-14T20:57:19.000Z (almost 2 years ago)
• Last Synced: 2025-03-28T05:06:31.010Z (6 months ago)
• Topics: keyboard, react, react-hook, react-hooks, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-keyboard-list-navigation
• Size: 1.99 MB
• Stars: 16
• Watchers: 2
• Forks: 2
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-keyboard-list-navigation

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![npm](https://img.shields.io/npm/v/use-keyboard-list-navigation)](https://www.npmjs.com/package/use-keyboard-list-navigation) [![Build Status](https://travis-ci.com/dzucconi/use-keyboard-list-navigation.svg?branch=master)](https://app.travis-ci.com/github/dzucconi/use-keyboard-list-navigation)

## What is this?

A React hook to navigate through lists with your keyboard.

## Installation

```bash

yarn add use-keyboard-list-navigation

```

## Usage

```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;

};

```