Action
component
The provides a tappable surface on the specified extension target as an entry point to an extension. Note that the text displayed on this is dependent on the description of the extension.
Anchor to actionitemActionItem
- Anchor to onPressonPress() => voidrequired
The callback that is executed when the user taps the
.- Anchor to enabledenabledboolean
Sets whether or not the
can be tapped.
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.
boolean - onPress
The callback that is executed when the user taps the `ActionItem`.
() => void
export interface ActionItemProps {
/**
* Sets whether or not the `ActionItem` can be tapped.
*/
enabled?: boolean;
/**
* The callback that is executed when the user taps the `ActionItem`.
*/
onPress: () => void;
}Was this section helpful?
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 />
);
examples
Render an ActionItem in post purchase
React
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 /> );TS
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); }, );
Preview
