Skip to content

Commit 5559974

Browse files
committed
add links and descriptions
1 parent 1c06c4e commit 5559974

3 files changed

Lines changed: 31 additions & 2 deletions

File tree

docs/hooks/useCombobox.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -908,6 +908,19 @@ function ComboBoxExample() {
908908

909909
## Multiple selection with Tag Group
910910

911+
If your multiple selection scenario uses a tag group to display selected items,
912+
you can use the hook in combination with [useTagGroup](/use-tag-group).
913+
914+
In the example below, we use:
915+
916+
- _null_ to control **selectedItem** as the hook should not care about selection.
917+
- **onSelectedItemChange** to be able to call **addItem** from _useTagGroup_.
918+
- control **inputValue** to be able to filter combobox items by query and selected items.
919+
- **stateReducer** to keep the menu open on selection.
920+
921+
[CodeSandbox for combobox with tag group
922+
example][code-sandbox-combobox-tag-group].
923+
911924
```jsx live
912925
function TagGroupExample() {
913926
const books = [
@@ -1346,6 +1359,8 @@ repository][examples-code-sandbox].
13461359
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseSelect%2Freact-virtual.js&moduleview=1
13471360
[examples-code-sandbox]:
13481361
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1
1362+
[code-sandbox-combobox-tag-group]:
1363+
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseCombobox%2Ftag-group-multiple-selection.js&moduleview=1
13491364
[react-virtual-github]: https://github.com/tannerlinsley/react-virtual
13501365
[react-virtualized-github]: https://github.com/bvaughn/react-virtualized
13511366
[react-window-github]: https://github.com/bvaughn/react-window

docs/hooks/useSelect.mdx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -746,6 +746,18 @@ function SelectExample() {
746746

747747
## Multiple selection with Tag Group
748748

749+
If your multiple selection scenario uses a tag group to display selected items,
750+
you can use the hook in combination with [useTagGroup](/use-tag-group).
751+
752+
In the example below, we use:
753+
754+
- _null_ to control **selectedItem** as the hook should not care about selection.
755+
- **onSelectedItemChange** to be able to call **addItem** from _useTagGroup_.
756+
- **stateReducer** to keep the menu open on selection.
757+
758+
[CodeSandbox for combobox with tag group
759+
example][code-sandbox-combobox-tag-group].
760+
749761
```jsx live
750762
function TagGroupExample() {
751763
const books = [
@@ -1139,6 +1151,8 @@ repository][examples-code-sandbox].
11391151
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseCombobox%2Faction-props.js&moduleview=1
11401152
[code-sandbox-react-virtual]:
11411153
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseCombobox%2Freact-virtual.js&moduleview=1
1154+
[code-sandbox-select-tag-group]:
1155+
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseSelect%2Ftag-group-multiple-selection.js
11421156
[examples-code-sandbox]:
11431157
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js&moduleview=1
11441158
[react-virtual-github]: https://github.com/tannerlinsley/react-virtual

docs/hooks/useTagGroup.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,5 +140,5 @@ function TagGroupExample() {
140140

141141
[use-tag-group-github]:
142142
https://github.com/downshift-js/downshift/tree/master/src/hooks/useTagGroup
143-
[code-sandbox-tag-group-usage]:
144-
https://codesandbox.io/p/sandbox/solitary-fast-8kg78c?file=%2Fsrc%2Fhooks%2FuseTagGroup%2Fbasic-usage.js%3A7%2C10&moduleview=1
143+
[code-sandbox-basic-usage]:
144+
https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseTagGroup%2Fbasic-usage.js%3A9%2C12&moduleview=1

0 commit comments

Comments
 (0)