POSBlockRow

component

examples

• Render a POSBlockRow in a POSBlock

  React

  import React from 'react';
  import {
    reactExtension,
    useApi,
    POSBlock,
    POSBlockRow,
    Text,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const PostPurchaseBlock = () => {
    const api =
      useApi<'pos.purchase.post.block.render'>();
  
    return (
      <POSBlock>
        <POSBlockRow>
          <Text>Hello, world!</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };
  
  export default reactExtension(
    'pos.purchase.post.block.render',
    () => <PostPurchaseBlock />,
  );
  

  TS

  import {
    POSBlock,
    POSBlockRow,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.purchase.post.block.render',
    (root, api) => {
      const posBlock =
        root.createComponent(POSBlock);
  
      const posBlockRow =
        root.createComponent(POSBlockRow);
  
      const text = root.createText('Hello, world!');
  
      posBlockRow.append(text);
      posBlock.append(posBlockRow);
      root.append(posBlock);
    },
  );