Selectable

component

examples

• Selectable

  React

  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 />
  })
  

  TS

  import {
    extension,
    Screen,
    ScrollView,
    Selectable,
    Stepper,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      let value = 0;
  
      const mainScreen = root.createComponent(
        Screen,
        {name: 'selectable', title: 'Selectable'},
      );
      const scrollView =
        root.createComponent(ScrollView);
      const text = root.createComponent(
        Text,
        null,
        value.toString(),
      );
      const selectable = root.createComponent(
        Selectable,
        {
          onPress: () => {
            value += 1;
            text.replaceChildren(value.toString());
          },
        },
      );
  
      selectable.append(text);
      scrollView.append(selectable);
      mainScreen.append(scrollView);
      root.append(mainScreen);
    },
  );