ActionItem

The `ActionItem` provides a tappable surface on the specified extension target as an entry point to an extension. Note that the text displayed on this `ActionItem` is dependent on the description of the extension.

Render an ActionItem in post purchase

import React from 'react';
import {
  reactExtension,
  useApi,
  ActionItem,
} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseActionItem = () => {
  const api = useApi<'pos.purchase.post.action.menu-item.render'>();

  return (
    <ActionItem
      onPress={() => api.action.presentModal()}
      enabled
    />
  );
};

export default reactExtension(
  'pos.purchase.post.action.menu-item.render',
  () => <PostPurchaseActionItem />
);

import {
  ActionItem,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.purchase.post.action.menu-item.render',
  (root, api) => {
    const actionItem = root.createComponent(
      ActionItem,
      {
        onPress: () => api.action.presentModal(),
        enabled: true,
      },
    );

    root.append(actionItem);
  },
);

ActionItem

ActionItemProps

Renders an `ActionItem` on action targets. Note that the text displayed on this `ActionItem` is dependent on the description of the extension.

enabled

Sets whether or not the `ActionItem` can be tapped.

onPress

The callback that is executed when the user taps the `ActionItem`.