pos.home.tile.render

Target

examples

• Tile

  React

  import React from 'react';
  
  import {
    Tile,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const TileComponent = () => {
    const api = useApi<'pos.home.tile.render'>();
    return (
      <Tile
        title="My app"
        subtitle="SmartGrid react Extension"
        onPress={() => {
          api.action.presentModal();
        }}
        enabled
      />
    );
  };
  
  export default reactExtension('pos.home.tile.render', () => {
    return <TileComponent />;
  });
  

  TS

  import {extension, Tile} from '@shopify/ui-extensions/point-of-sale';
  
  export default extension('pos.home.tile.render', (root, api) => {
    const tile = root.createComponent(Tile, {
      title: 'My app',
      subtitle: 'SmartGrid vanilla-js Extension',
      onPress: () => api.action.presentModal(),
      enabled: true,
    });
  
    root.append(tile);
  });