Action
ActionItem has been deprecated. Please use the Button Component instead.
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.
Anchor to actionitemActionItem
- Anchor to onPressonPress() => voidrequired
The callback that is executed when the user taps the
.DeprecatedActionItem has been deprecated. Use the Button component instead.
- Anchor to enabledenabledboolean
Sets whether or not the
can be tapped.DeprecatedActionItem has been deprecated. Use the Button component instead.
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.
* @deprecated ActionItem has been deprecated. Use the Button component instead.
*/
enabled?: boolean;
/**
* The callback that is executed when the user taps the `ActionItem`.
* @deprecated ActionItem has been deprecated. Use the Button component instead.
*/
onPress: () => void;
}Render an ActionItem in post purchase
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
