1"use strict";(globalThis.webpackChunkdownshift_docs=globalThis.webpackChunkdownshift_docs||[]).push([[940],{562(e,t,n){n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>u,frontMatter:()=>s,metadata:()=>i,toc:()=>r});var a=n(8168),o=(n(6540),n(5680));const s={title:"useMultipleSelection",description:"useMultipleSelection for building taglist-based multiple selection",slug:"/use-multiple-selection"},l="useMultipleSelection",i={unversionedId:"hooks/useMultipleSelection",id:"hooks/useMultipleSelection",title:"useMultipleSelection",description:"useMultipleSelection for building taglist-based multiple selection",source:"@site/docs/hooks/useMultipleSelection.mdx",sourceDirName:"hooks",slug:"/use-multiple-selection",permalink:"/use-multiple-selection",draft:!1,editUrl:"https://github.com/downshift-js/downshift-docs/tree/master/docs/hooks/useMultipleSelection.mdx",tags:[],version:"current",frontMatter:{title:"useMultipleSelection",description:"useMultipleSelection for building taglist-based multiple selection",slug:"/use-multiple-selection"},sidebar:"tutorialSidebar",previous:{title:"useCombobox",permalink:"/use-combobox"},next:{title:"useSelect",permalink:"/use-select"}},d={},r=[{value:"DEPRECATED",id:"deprecated",level:2},{value:"The problem",id:"the-problem",level:2},{value:"This solution",id:"this-solution",level:2},{value:"Breaking Changes in v8 and v9",id:"breaking-changes-in-v8-and-v9",level:2},{value:"Props used in examples",id:"props-used-in-examples",level:2},{value:"Usage with combobox",id:"usage-with-combobox",level:2},{value:"Usage with select",id:"usage-with-select",level:2},{value:"React Native",id:"react-native",level:2},{value:"Other usage examples",id:"other-usage-examples",level:2}],m=(p="ThemedSnack",function(e){return console.warn("Component "+p+" was not imported, exported, or provided by MDXProvider as global scope"),(0,o.mdx)("div",e)});var p;const c={toc:r};function u({components:e,...t}){return(0,o.mdx)("wrapper",(0,a.A)({},c,t,{components:e,mdxType:"MDXLayout"}),(0,o.mdx)("h1",{id:"usemultipleselection"},"useMultipleSelection"),(0,o.mdx)("h2",{id:"deprecated"},"DEPRECATED"),(0,o.mdx)("p",null,"Please use the ",(0,o.mdx)("a",{parentName:"p",href:"/use-tag-group"},"useTagGroup")," hook to create multiple selection\ndropdowns with tag groups. Check out the examples for each:"),(0,o.mdx)("ul",null,(0,o.mdx)("li",{parentName:"ul"},(0,o.mdx)("a",{parentName:"li",href:"/use-combobox#multiple-selection-with-tag-group"},"useCombobox")),(0,o.mdx)("li",{parentName:"ul"},(0,o.mdx)("a",{parentName:"li",href:"/use-select#multiple-selection-with-tag-group"},"useSelect"))),(0,o.mdx)("h2",{id:"the-problem"},"The problem"),(0,o.mdx)("p",null,"You have a custom ",(0,o.mdx)("strong",{parentName:"p"},"select")," or a ",(0,o.mdx)("strong",{parentName:"p"},"combobox")," in your applications which\nperforms a multiple selection. You want the whole experience to be accessible,\nincluding adding and removing items from selection, navigating between the items\nand back to the dropdown. You also want this solution to be simple to use and\nflexible enough so you can tailor it further to your specific needs."),(0,o.mdx)("h2",{id:"this-solution"},"This solution"),(0,o.mdx)("p",null,(0,o.mdx)("strong",{parentName:"p"},"useMultipleSelection")," is a React hook that manages all the stateful logic\nneeded to make the multiple selection dropdown functional and accessible. It\nreturns a set of props that are meant to be called and their results\ndestructured on the dropdown's elements that involve the multiple selection\nexperience: the dropdown main element itself, which can be either an ",(0,o.mdx)("em",{parentName:"p"},"input")," (if\nyou are building a ",(0,o.mdx)("em",{parentName:"p"},"combobox"),") or a ",(0,o.mdx)("em",{parentName:"p"},"button")," (if you are building a ",(0,o.mdx)("em",{parentName:"p"},"select"),"),\nand the selected items. The props are similar to the ones provided by vanilla\n",(0,o.mdx)("em",{parentName:"p"},"Downshift")," to the children render prop."),(0,o.mdx)("p",null,"These props are called getter props and their return values are destructured as\na set of ARIA attributes and event listeners. Together with the action props and\nstate props, they create all the stateful logic needed for the dropdown to\nbecome accessible. Every functionality needed should be provided out of the box:\narrow navigation between dropdown and items, navigation between the items\nthemselves, removing and adding items, and also a helpful ",(0,o.mdx)("em",{parentName:"p"},"aria-live")," message\nwhen an item has been removed from the selection."),(0,o.mdx)("h2",{id:"breaking-changes-in-v8-and-v9"},"Breaking Changes in v8 and v9"),(0,o.mdx)("p",null,(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection")," has been affected by breaking changes in v8 and v9, so\ncheck out the migration pages for ",(0,o.mdx)("a",{parentName:"p",href:"https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V8.md"},"v8")," and\n",(0,o.mdx)("a",{parentName:"p",href:"https://github.com/downshift-js/downshift/tree/master/src/hooks/MIGRATION_V9.md"},"v9"),"."),(0,o.mdx)("h2",{id:"props-used-in-examples"},"Props used in examples"),(0,o.mdx)("p",null,"In the examples below, we use the ",(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection")," hook with both\n",(0,o.mdx)("em",{parentName:"p"},"useSelect")," and ",(0,o.mdx)("em",{parentName:"p"},"useCombobox"),", destructure from its result the getter props and\nstate variables. The ",(0,o.mdx)("strong",{parentName:"p"},"getDropdownProps")," can be called with a\n",(0,o.mdx)("strong",{parentName:"p"}
1,"preventKeyAction")," parameter. In some cases you may not want the user to\nnavigate from the dropdown to the selected items or to delete them with\n",(0,o.mdx)("strong",{parentName:"p"},"Backspace"),". For example you can pass ",(0,o.mdx)("em",{parentName:"p"},"isOpen")," as its value in order to keep\nremoval and navigation actions from occuring while the dropdown is open. The\nreturned props are used as follows:"),(0,o.mdx)("table",null,(0,o.mdx)("thead",{parentName:"table"},(0,o.mdx)("tr",{parentName:"thead"},(0,o.mdx)("th",{parentName:"tr",align:null},"Returned prop"),(0,o.mdx)("th",{parentName:"tr",align:null},"Element"),(0,o.mdx)("th",{parentName:"tr",align:null},"Comments"))),(0,o.mdx)("tbody",{parentName:"table"},(0,o.mdx)("tr",{parentName:"tbody"},(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"getDropdownProps")),(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"<input>")," or ",(0,o.mdx)("inlineCode",{parentName:"td"},"<button>")),(0,o.mdx)("td",{parentName:"tr",align:null},"Call optionally with ",(0,o.mdx)("em",{parentName:"td"},"preventKeyAction")," and destructure its returned object on the toggle button (select) or input (combobox) element.")),(0,o.mdx)("tr",{parentName:"tbody"},(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"getSelectedItemProps")),(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"<span>")),(0,o.mdx)("td",{parentName:"tr",align:null},"Call and destructure its returned object on the selected item element.")),(0,o.mdx)("tr",{parentName:"tbody"},(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"selectedItems")),(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"<span>")),(0,o.mdx)("td",{parentName:"tr",align:null},"State value with the items currently selected. Used to render the Tags.")),(0,o.mdx)("tr",{parentName:"tbody"},(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"addSelectedItem")),(0,o.mdx)("td",{parentName:"tr",align:null}),(0,o.mdx)("td",{parentName:"tr",align:null},"Action prop that adds the item to the selection. Best used in ",(0,o.mdx)("em",{parentName:"td"},"useSelect")," and ",(0,o.mdx)("em",{parentName:"td"},"useCombobox")," prop ",(0,o.mdx)("em",{parentName:"td"},"onStateChange")," or ",(0,o.mdx)("em",{parentName:"td"},"onSelectedItemChange"))),(0,o.mdx)("tr",{parentName:"tbody"},(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"removeSelectedItem")),(0,o.mdx)("td",{parentName:"tr",align:null},(0,o.mdx)("inlineCode",{parentName:"td"},"<span>")," icon"),(0,o.mdx)("td",{parentName:"tr",align:null},"Action prop that removes the item from the selection. Used in the ",(0,o.mdx)("em",{parentName:"td"},"X")," icon/button onClick handler.")))),(0,o.mdx)("p",null,"For a complete documentation on all the returned props, hook props and more\ninformation check out the ",(0,o.mdx)("a",{parentName:"p",href:"https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection"},"Github Page"),"."),(0,o.mdx)("h2",{id:"usage-with-combobox"},"Usage with combobox"),(0,o.mdx)("p",null,"A ",(0,o.mdx)("em",{parentName:"p"},"combobox")," with multiple selection can be created in a similar way to a single\nselection equivalent, with the addition of rendering the selected items. The UI\nis completely up to the developer, as the selected items can be created using\n",(0,o.mdx)("em",{parentName:"p"},"span")," elements or custom Components from UI libraries, within an ",(0,o.mdx)("em",{parentName:"p"},"inline-block"),"\nor ",(0,o.mdx)("em",{parentName:"p"},"flex")," display."),(0,o.mdx)("p",null,"In the example below, each item has an ",(0,o.mdx)("em",{parentName:"p"},"X")," icon attached to it, with a\n",(0,o.mdx)("em",{parentName:"p"},"removeSelectedItem")," callback in the ",(0,o.mdx)("em",{parentName:"p"},"onClick")," handler. Items are added using\nthe ",(0,o.mdx)("em",{parentName:"p"},"setSelectedItems")," function inside the ",(0,o.mdx)("em",{parentName:"p"},"onStateChange")," handler of\n",(0,o.mdx)("em",{parentName:"p"},"useCombobox"),", and ",(0,o.mdx)("em",{parentName:"p"},"selectedItems")," are passed to ",(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection")," as a\ncontrol prop. ",(0,o.mdx)("em",{parentName:"p"},"selectedItem")," of ",(0,o.mdx)("em",{parentName:"p"},"useCombobox")," is also controlled and being\npassed a ",(0,o.mdx)("em",{parentName:"p"},"null")," value since ",(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection")," will handle the items\nselection in this case."),(0,o.mdx)("p",null,(0,o.mdx)("a",{parentName:"p",href:"https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseMultipleSelection%2Fcombobox.js&moduleview=1"},"CodeSandbox for combobox usage example"),"."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},"function MultipleComboBoxExample() {\n const books = [\n {id: 'book-1', author: 'Harper Lee', title: 'To Kill a Mockingbird'},\n {id: 'book-2', author: 'Lev Tolstoy', title: 'War and Peace'},\n {id: 'book-3', author: 'Fyodor Dostoevsky', title: 'The Idiot'},\n {id: 'book-4', author: 'Oscar Wilde', title: 'A Picture of Dorian Gray'},\n {id: 'book-5', author: 'George Orwell', title: '1984'},\n {id: 'book-6', author: 'Jane Austen', title: 'Pride and Prejudice'},\n {id: 'book-7', author: 'Marcus Aurelius', title: 'Meditations'},\n {\n id: 'book-8',\n author: 'Fyodor Dostoevsky',\n title: 'The Brothers Karamazov',\n },\n {id: 'book-9', author: 'Lev Tolstoy', title: 'Anna Karenina'},\n {id: 'book-10', author: 'Fyodor Dostoevsky', title: 'Crime and Punishment'},\n ]\n const initialSelectedItems = [books[0], books[1]]\n\n function getFilteredBooks(selectedItems, inputValue) {\n const lowerCasedInputValue = inputValue.toLowerCase()\n\n return books.filter(function filterBook(book) {\n return (\n !selectedItems.includes(book) &&\n (book.title.toLowerCase().includes(lowerCasedInputValue) ||\n book.author.toLowerCase().includes(lowerCasedInputValue))\n )\n })\n }\n\n function MultipleComboBox() {\n const [inputValue, setInputValue] = React.useState('')\n const [selectedItems, setSelectedItems] =\n React.useState(initialSelectedItems)\n const items = React.useMemo(\n () => getFilteredBooks(selectedItems, inputValue),\n [selectedItems, inputValue],\n )\n const {get
1SelectedItemProps, getDropdownProps, removeSelectedItem} =\n useMultipleSelection({\n selectedItems,\n onStateChange({selectedItems: newSelectedItems, type}) {\n switch (type) {\n case useMultipleSelection.stateChangeTypes\n .SelectedItemKeyDownBackspace:\n case useMultipleSelection.stateChangeTypes\n .SelectedItemKeyDownDelete:\n case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:\n case useMultipleSelection.stateChangeTypes\n .FunctionRemoveSelectedItem:\n setSelectedItems(newSelectedItems)\n break\n default:\n break\n }\n },\n })\n const {\n isOpen,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n getInputProps,\n highlightedIndex,\n getItemProps,\n selectedItem,\n } = useCombobox({\n items,\n itemToString(item) {\n return item ? item.title : ''\n },\n defaultHighlightedIndex: 0, // after selection, highlight the first item.\n selectedItem: null,\n inputValue,\n stateReducer(state, actionAndChanges) {\n const {changes, type} = actionAndChanges\n\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open after selection.\n highlightedIndex: 0, // with the first option highlighted.\n }\n default:\n return changes\n }\n },\n onStateChange({\n inputValue: newInputValue,\n type,\n selectedItem: newSelectedItem,\n }) {\n switch (type) {\n case useCombobox.stateChangeTypes.InputKeyDownEnter:\n case useCombobox.stateChangeTypes.ItemClick:\n case useCombobox.stateChangeTypes.InputBlur:\n if (newSelectedItem) {\n setSelectedItems([...selectedItems, newSelectedItem])\n setInputValue('')\n }\n break\n\n case useCombobox.stateChangeTypes.InputChange:\n setInputValue(newInputValue)\n\n break\n default:\n break\n }\n },\n })\n\n return (\n <div className=\"w-[592px]\">\n <div className=\"flex flex-col gap-1\">\n <label className=\"w-fit\" {...getLabelProps()}>\n Pick some books:\n </label>\n <div className=\"shadow-sm bg-white dark:bg-zinc-900 inline-flex gap-2 items-center flex-wrap p-1.5\">
1\n {selectedItems.map(function renderSelectedItem(\n selectedItemForRender,\n index,\n ) {\n return (\n <span\n className=\"bg-gray-100 dark:bg-zinc-800 rounded-md px-1 focus:bg-red-400\"\n key={`selected-item-${index}`}\n {...getSelectedItemProps({\n selectedItem: selectedItemForRender,\n index,\n })}\n >\n {selectedItemForRender.title}\n <span\n className=\"px-1 cursor-pointer\"\n onClick={e => {\n e.stopPropagation()\n removeSelectedItem(selectedItemForRender)\n }}\n >\n ✕\n </span>\n </span>\n )\n })}\n <div className=\"flex gap-0.5 grow\">\n <input\n placeholder=\"Best book ever\"\n className=\"w-full\"\n {...getInputProps(getDropdownProps({preventKeyAction: isOpen}))}\n />\n <button\n aria-label=\"toggle menu\"\n className=\"px-2\"\n type=\"button\"\n {...getToggleButtonProps()}\n >\n ↓\n </button>\n </div>\n </div>\n </div>\n <ul\n className={`absolute w-inherit bg-white dark:bg-zinc-900 mt-1 shadow-md max-h-80 overscroll-y-contain overflow-y-scroll p-0 z-10 ${\n !(isOpen && items.length) && 'hidden'\n }`}\n {...getMenuProps()}\n >\n {isOpen &&\n items.map((item, index) => (\n <li\n className={cx(\n highlightedIndex === index &&\n 'bg-blue-300 !text-black dark:bg-sky-700 dark:!text-white',\n selectedItem === item &&\n 'font-bold !text-black dark:!text-white',\n 'py-2 px-3 shadow-sm flex flex-col text-zinc-900 dark:text-zinc-100',\n )}\n key={`${item.value}${index}`}\n {...getItemProps({item, index})}\n >\n <span>{item.title}</span>\n <span className=\"text-sm text-zinc-600 dark:text-zinc-300\">\n {item.author}\n </span>\n </li>\n ))}\n </ul>\n </div>\n )\n }\n return <MultipleComboBox />\n}\n")),(0,o.mdx)("h2",{id:"usage-with-select"},"Usage with select"),(0,o.mdx)("p",null,"A ",(0,o.mdx)("em",{parentName:"p"},"select")," with multiple selection is similar to the ",(0,o.mdx)("em",{parentName:"p"},"combobox")," equivalent. We\nuse the basic ",(0,o.mdx)("em",{parentName:"p"},"useSelect")," example and add the selected items as ",(0,o.mdx)("em",{parentName:"p"},"span")," elements.\nCustom components from UI libraries can be used as well, since the UI is up to\nthe developer."),(0,o.mdx)("p",null,(0,o.mdx)("a",{parentName:"p",href:"https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Fhooks%2FuseMultipleSelection%2Fselect.js&moduleview=1"},"CodeSandbox for select usage example"),"."),(0,o.mdx)("pre",null,(0,o.mdx)("code",{parentName:"pre",className:"language-jsx",metastring:"live",live:!0},"function MultipleSelectExample() {\n const books = [\n {id: 'book-1', author: 'Harper Lee', title: 'To Kill a Mockingbird'},\n {id: 'book-2', author: 'Lev Tolstoy', title: 'War and Peace'},\n {id: 'book-3', author: 'Fyodor Dostoevsky', title: 'The Idiot'},\n {id: 'book-4', author: 'Oscar Wilde', title: 'A Picture of Dorian Gray'},\n {id: 'book-5', author: 'George Orwell', title: '1984'},\n {id: 'book-6', author: 'Jane Austen', title: 'Pride and Prejudice'},\n {id: 'book-7', author: 'Marcus Aurelius', title: 'Meditations'},\n {\n id: 'book-8',\n author: 'Fyodor Dostoevsky',\n title: 'The Brothers Karamazov',\n },\n {id: 'book-9', author: 'Lev Tolstoy', title: 'Anna Karenina'},\n {id: 'book-10', author: 'Fyodor Dostoevsky', title: 'Crime and Punishment'},\n ]\n function getBooksFilter(selectedItems) {\n return function booksFilter(book) {\n return selectedItems.indexOf(book) < 0\n }\n }\n\n function MultipleSelect() {\n const {\n getSelectedItemProps,\n getDropdownProps,\n addSelectedItem,\n removeSelectedItem,\n selectedItems,\n } = useMultipleSelection({initialSelectedItems: [books[0], books[1]]})\n const items = books.filter(getBooksFilter(selectedItems))\n const {\n isOpen,\n selectedItem,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n highlightedIndex,\n getItemProps,\n } = useSelect({\n selectedItem: null,\n defaultHighlightedIndex: 0, // after selection, highlight the first item.\n items,\n stateReducer: (state, actionAndChanges) => {\n const {changes, type} = actionAndChanges\n switch (type) {\n case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep the menu open after selection.\n highlightedIndex: 0, // with the first option highlighted.\n }\n }\n return changes\n },\n onStateChange: ({type, selectedItem: newSelectedItem}) =>
1 {\n switch (type) {\n case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:\n case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n case useSelect.stateChangeTypes.ToggleButtonBlur:\n if (newSelectedItem) {\n addSelectedItem(newSelectedItem)\n }\n break\n default:\n break\n }\n },\n })\n\n return (\n <div className=\"w-[592px]\">\n <div className=\"flex flex-col gap-1\">\n <label className=\"w-fit\" {...getLabelProps()}>\n Pick some books:\n </label>\n <div className=\"shadow-sm bg-white dark:bg-zinc-900 inline-flex gap-2 items-center flex-wrap p-1.5 border-2 focus-within:border-gray-400\">\n {selectedItems.map(function renderSelectedItem(\n selectedItemForRender,\n index,\n ) {\n return (\n <span\n className=\"bg-gray-100 dark:bg-zinc-800 rounded-md px-1 focus:bg-red-400\"\n key={`selected-item-${index}`}\n {...getSelectedItemProps({\n selectedItem: selectedItemForRender,\n index,\n })}\n >\n {selectedItemForRender.title}\n <span\n className=\"px-1 cursor-pointer\"\n onClick={e => {\n e.stopPropagation()\n removeSelectedItem(selectedItemForRender)\n }}\n >\n ✕\n </span>\n </span>\n )\n })}\n <div\n className=\"px-2 py-1 outline-2 outline-gray-400 cursor-pointer focus:bg-gray-200 dark:focus:bg-zinc-800 rounded-md\"\n {...getToggleButtonProps(\n getDropdownProps({preventKeyAction: isOpen}),\n )}\n >\n Pick some books ↓\n </div>\n </div>\n </div>\n <ul\n className={`absolute w-inherit bg-white dark:bg-zinc-900 mt-1 shadow-md max-h-80 overflow-scroll p-0 z-10 ${\n !(isOpen && items.length) && 'hidden'\n }`}\n {...getMenuProps()}\n >\n {isOpen &&\n items.map((item, index) => (\n <li\n className={cx(\n highlightedIndex === index &&\n 'bg-blue-300 !text-black dark:bg-sky-700 dark:!text-white',\n selectedItem === item &&\n 'font-bold !text-black dark:!text-white',\n 'py-2 px-3 shadow-sm flex flex-col text-zinc-900 dark:text-zinc-100',\n )}\n key={`${item.value}${index}`}\n {...getItemProps({item, index})}\n >\n <span>{item.title}</span>\n <span className=\"text-sm text-zinc-600 dark:text-zinc-300\">\n {item.author}\n </span>\n </li>\n ))}\n </ul>\n </div>\n )\n }\n return <MultipleSelect />\n}\n")),(0,o.mdx)("h2",{id:"react-native"},"React Native"),(0,o.mdx)("p",null,"The hook can be used with ",(0,o.mdx)("em",{parentName:"p"},"React Native")," as well. The HTML elements and styles\nare replaced with React Native equivalents, but the ",(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection")," usage\nis exactly the same as on React web."),(0,o.mdx)(m,{snackId:"@silviuaavram/downshift-usemultipleselection-in-react-native",mdxType:"ThemedSnack"}),(0,o.mdx)("h2",{id:"other-usage-examples"},"Other usage examples"),(0,o.mdx)("p",null,"To see more cool stuff you can build with ",(0,o.mdx)("em",{parentName:"p"},"useMultipleSelection"),", explore the\n",(0,o.mdx)("a",{parentName:"p",href:"https://codesandbox.io/p/sandbox/github/kentcdodds/downshift-examples?file=%2Fsrc%2Findex.js%3A25%2C12&moduleview=1"},"examples repository"),"."))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.