React-use-navigate-list NPM

react-use-navigate-list hook

🎉 react-use-navigate-list hook makes the list interactive using arrow buttons. It is optimized to reduce unnecessary re-renders

Installation

$ npm install react-use-navigate-list 
$ yarn add react-use-navigate-list

Features

Typescript support
Navigate through the list using ArrowUp and ArrowDown buttons
Select item by pressing Enter
Supports vertical and horizontal navigation

Props

Name	Type	Default	Description
list	Array		required. Array of items
onSelect	Function		required. Callback function called on item click or on Enter press.
indexPath	String	"id"	optional. Custom path to the item index
vertical	Boolean	true	optional. Switches between horizontal and vertical navigation

Example

import React from "react";
import useNavigateList from "react-use-navigate-list";

const itemList = [
  { id: 1, name: "Banana" },
  { id: 2, name: "Pineapple" },
  { id: 3, name: "Blueberry" },
];

function App() {
  const { activeIndex, itemProps } = useNavigateList({
    list: itemList,
    onSelect: (item) => {
      console.log(item);
    },
  });

  return itemList.map((item, index) => (
    <div
      {...itemProps(item)}
      key={item.id}
      className={activeIndex === index ? "active-className" : ""}
    >
      {item.name}
    </div>
  ));
}