Skip to main content
Version: v3.6.0

@rooks/use-select

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


Build Status

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

ArgumentTypeDescriptionDefault value
listArrayList of items for which the selection is usedundefined
initialIndexnumberInitially selected index0

Returned Object

Returned object attributesTypeDescription
indexintIndex of currently selected index
itemanyCurrently selected item
setIndexfunctionUpdate selected index
setItemfunctionUpdate selected item