@rooks/use-select
v1.0.3-alpha.0 react-hooks.org react rooks hooks mouse mouse hook
@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 |
npm i @rooks/[email protected]
Metadata
- MIT
- Whatever
- Unknown
- released 1/15/2019