react-use-navigate-list hook

Demo: Sandbox

🎉 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>
  ));
}

License

Licensed under MIT