[react] feat: Added docs for hooks/useSelection
This commit is contained in:
parent
58818cd846
commit
717482f4ab
1 changed files with 61 additions and 3 deletions
|
@ -2,6 +2,64 @@
|
|||
title: useSelection
|
||||
---
|
||||
|
||||
:::note
|
||||
This page is yet to be created
|
||||
:::
|
||||
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
|
||||
import { Popout } from '@freesewing/react/components/Popout'
|
||||
import { Tab, Tabs } from '@freesewing/react/components/Tab'
|
||||
|
||||
<DocusaurusDoc>
|
||||
|
||||
The **useSelection** hook facilitates letting the user select one or more items
|
||||
from a list or array. You need to pass this list/array to the hook.
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
import { useSelection } from '@freesewing/react/hooks/useFilter'
|
||||
|
||||
const MyComponent = ({ items = [] }) => {
|
||||
const {
|
||||
count,
|
||||
selection,
|
||||
setSelection,
|
||||
toggle,
|
||||
toggleAll,
|
||||
} = useSelection(items)
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
## Return value
|
||||
|
||||
Calling the hook returns an object with the following properties:
|
||||
|
||||
- [count](#count)
|
||||
- [selection](#selection)
|
||||
- [setSelection](#setselection)
|
||||
- [toggle](#toggle)
|
||||
- [toggleAll](#toggleAll)
|
||||
|
||||
### count
|
||||
|
||||
This holds the number of items currently selected.
|
||||
|
||||
### selection
|
||||
|
||||
This holds an object of selected items where the key is the index and the value the item itself.
|
||||
Call `selection.values()` to get an array.
|
||||
|
||||
### setSelection
|
||||
|
||||
This is a method that sets the selection manually, typically not used.
|
||||
|
||||
# toggle
|
||||
|
||||
This is a method that takes an index and toggles the selection for that item.
|
||||
|
||||
# toggleAll
|
||||
|
||||
This is a method will select all items, unless all items are currently
|
||||
selected. In that case, it will select zero items.
|
||||
|
||||
</DocusaurusDoc>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue