@rooks/use-select

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

npm install rooks

or

yarn add rooks

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

About

Select values from a list easily. List selection hook for react.

Installation

npm install --save @rooks/use-select

Importing the hook

import useSelect from "@rooks/use-select"

Usage

const list = [
  {
    heading: "Tab 1",
    content: "Tab 1 Content"
  },
  {
    heading: "Tab 2",
    content: "Tab 2 Content"
  }
];

function Demo() {
  const { index, setIndex, item } = useSelect(list, 0);
  return (
    <div>
      {list.map((listItem, listItemIndex) => (
        <button
          key={listItemIndex}
          style={{
            background: index === listItemIndex ? "dodgerblue" : "inherit"
          }}
          onClick={() => setIndex(listItemIndex)}
        >
          {listItem.heading}
        </button>
      ))}
      <p>{item.content}</p>
    </div>
  );
}
render(<Demo/>)

Arguments

| Argument | Type | Description | Default value | | ------------ | ------ | --------------------------------------------- | ------------- | | list | Array | List of items for which the selection is used | undefined | | initialIndex | number | Initially selected index | 0 |

Returned Object

| Returned object attributes | Type | Description | | -------------------------- | -------- | --------------------------------- | | index | int | Index of currently selected index | | item | any | Currently selected item | | setIndex | function | Update selected index | | setItem | function | Update selected item |