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