Skip to main content

Selectable
component

The selectable component allows you to wrap any non-interactive UI component to make it selectable.

() => void
required

The callback on press.

boolean

Whether the selectable reacts to presses.

Was this section helpful?

Selectable

import React, { useState } from 'react';

import { Screen, reactExtension, Text, ScrollView, Selectable } from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
const [count, setCount] = useState(0);

return (
<Screen name='selectable' title='Selectable'>
<ScrollView>
<Selectable onPress={() => {setCount(count + 1)}}>
<Text variant="body">{count}</Text>
</Selectable>
</ScrollView>
</Screen>
);
}

export default reactExtension('pos.home.modal.render', () => {
return <SmartGridModal />
})

Preview