Version: Next

use-select

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#

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

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5