File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff 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
912925function 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
Original file line number Diff line number Diff 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
750762function 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
Original file line number Diff line number Diff 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
You can’t perform that action at this time.
0 commit comments