useMultiSelect

@shopify/shop-minis-platform-sdk / hooks/useMultiSelect

useMultiSelect()

useMultiSelect(initiallySelectedIndexes?): UseMultiSelectReturn

the useMultiSelect hook is meant to help manage the state of the MultipleChoice or ImageMutlipleChoice component when multiple options are selectable.

Because the items are already passed in to MultipleChoice and ImageMultipleChoice, the indexes of where items are placed should available at the same level as useMultiSelect. Working with indexes (instead of values) simplifies the logic of checking when something is selected and avoids complications of returning different typed values.

Parameters

Parameter	Type
initiallySelectedIndexes?	number[]

Returns

UseMultiSelectReturn

Component

Examples

 const [selectedIndexes, toggleIndex] = useMultiSelect()

 return (
   <MultipleChoice
     {...}
     selectedIndexes={selectedIndexes}
     onChoiceSelected={toggleIndex}
   />
 )

Here is an example of how you can get the values out when a user selects an option

 // values can be type string or number
 const choices = [
   {
     label: 'Option 1',
     value: 17,
   },
   {
     label: 'Option 2',
     value: "a string value",
   },
 ]
 const [selectedIndexes, toggleIndex] = useMultiSelect()

 const handleChoiceSelected = useCallback((index: number) => {
   const {label, value} = choices[index]

   // here you can use the label or value for more complex logic
   console.log({label, value})

   toggleIndex(index)
 }, [])

return (
 <MultipleChoice
   {...}
   selectedIndexes={selectedIndexes}
   onChoiceSelected={handleChoiceSelected}
 />
)

Component