Skip to main content
Version: 5.0.3

useSelect

About#

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

Installation#

npm install --save rooks

Importing the hook#

import { useSelect } from 'rooks';

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

Codesandbox Example#

Basic usage#

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