# Action API The Action API allows an action extension to modally present its corresponding modal target. #### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.purchase.post.action.menu-item.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render) - [pos.purchase.post.block.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.block.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.block.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render) ## ActionApi ### ActionApiContent ### presentModal Presents the `action-overlay.render` extension target on top of present view. For example: if we are calling presentModal() from pos.purchase.post.action.menu-item.render, it should present pos.purchase.post.action.render. ## Examples The Action API allows an action extension to modally present its corresponding modal target. #### Supporting targets - [pos.home.tile.render](/docs/api/pos-ui-extensions/targets/smart-grid/pos-home-tile-render) - [pos.purchase.post.action.menu-item.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-action-menu-item-render) - [pos.purchase.post.block.render](/docs/api/pos-ui-extensions/targets/post-purchase/pos-purchase-post-block-render) - [pos.order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-action-menu-item-render) - [pos.order-details.block.render](/docs/api/pos-ui-extensions/targets/order-details/pos-order-details-block-render) - [pos.product-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/product-details/pos-product-details-action-menu-item-render) - [pos.customer-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-action-menu-item-render) - [pos.customer-details.block.render](/docs/api/pos-ui-extensions/targets/customer-details/pos-customer-details-block-render) - [pos.draft-order-details.action.menu-item.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-action-menu-item-render) - [pos.draft-order-details.block.render](/docs/api/pos-ui-extensions/targets/draft-order-details/pos-draft-order-details-block-render) ### ### Present a modal from post purchase. ```tsx import React from 'react'; import { reactExtension, useApi, Button, } from '@shopify/ui-extensions-react/point-of-sale'; const PostPurchaseActionItem = () => { const api = useApi<'pos.purchase.post.action.menu-item.render'>(); return <Button onPress={() => api.action.presentModal()} />; }; export default reactExtension( 'pos.purchase.post.action.menu-item.render', () => <PostPurchaseActionItem />, ); ``` ```ts import {Button, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.purchase.post.action.menu-item.render', (root, api) => { const actionItem = root.createComponent(Button, { onPress: () => api.action.presentModal(), }); root.append(actionItem); }, ); ``` ### ### Present a modal from smart grid. ```tsx import React from 'react'; import { reactExtension, useApi, Tile, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title='My App' onPress={() => api.action.presentModal()} enabled /> ); }; export default reactExtension( 'pos.home.tile.render', () => <SmartGridTile /> ); ``` ```ts import {Tile, extension} from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.home.tile.render', (root, api) => { const tile = root.createComponent(Tile, { title: 'Action API', onPress: () => api.action.presentModal(), enabled: true, }); root.append(tile); }); ```