ImageMultipleChoice

@shopify/shop-minis-platform-sdk / components/ImageMultipleChoice/ImageMultipleChoice

ImageChoiceType

Properties

imageUrl

imageUrl: string

label

label: string

value

value: string | number

---

ImageMultipleChoiceProps

Properties

animated?

optional animated: boolean

choices

choices: ImageChoiceType[]

An array of options to be selected by the user

Example

const choices = [{label: 'choice 1', value: 'value 1', imageUrl: 'https://picsum.photos/200'}]
<ImageMultipleChoice {...} choices={choices} />

imageSize

imageSize: number

For proper behavior, an image size must be passed in Images are assumed to be square

Example

<ImageMultipleChoice {...} imageSize={200} />

initialOffsetX?

optional initialOffsetX: number

By default, the first image will be flush against the left side of the carousel. This value allows the first image to be positioned in a different location. This is useful if you want images to appear more centered but not be cut off on the left side when scrolling. When used in conjuntion with the snap property, all snap positions will also be offset by this value.

Example

<ImageMultipleChoice {...} initialOffsetX={30} />

onChoiceSelected()

onChoiceSelected: (index, value) => void

An function to call when a choice is pressed

Parameters

Parameter	Type
index	number
value	string | number

Returns

void

Example

<ImageMultipleChoice {...} onChoiceSelected={(index, value) => console.log({index, value})} />

selectedIndexes

selectedIndexes: number[]

An array of indexes that should be displayed as selected

Example

<ImageMultipleChoice {...} selectedIndexes={[0,1]} />

This example will select the first and second image

snap?

optional snap: boolean

If true, the scrolling behavior is modified. Upon release from scrolling, the left most image will be moved to be flush against the left side of the carousel

Example

<ImageMultipleChoice {...} snap />

style?

optional style: ImageMultipleChoiceStyles

to allow overriding the default style

---

ImageMultipleChoice()

ImageMultipleChoice(__namedParameters): Element

Parameters

Parameter	Type
__namedParameters	ImageMultipleChoiceProps

Returns

Element