Toast APIAPIs
APIs
The Toast API allows the display of a Toast component.
Anchor to toastapiToastApi
- Anchor to showshow(content: string, options?: ) => voidrequired
Show a toast.
ToastApiContent
- show
Show a toast.
(content: string, options?: ShowToastOptions) => void
export interface ToastApiContent {
/**
* Show a toast.
* @param content The text content to display.
* @param options An object containing ShowToastOptions.
*/
show: (content: string, options?: ShowToastOptions) => void;
}ShowToastOptions
- duration
number
export interface ShowToastOptions {
duration?: number;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Toast API
Anchor to example-display-a-toast-component-from-the-tileDisplay a Toast component from the tile
Was this section helpful?
Display a Toast component from the tile
import React from 'react';
import {
Tile,
useApi,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridTile = () => {
const api = useApi<'pos.home.tile.render'>();
return (
<Tile
title="My App"
onPress={() => api.toast.show('Toast content', 5000)}
enabled
/>
);
};
export default reactExtension('pos.home.tile.render', () => <SmartGridTile />);
examples
Display a Toast component from the tile
React
import React from 'react'; import { Tile, useApi, reactExtension, } from '@shopify/ui-extensions-react/point-of-sale'; const SmartGridTile = () => { const api = useApi<'pos.home.tile.render'>(); return ( <Tile title="My App" onPress={() => api.toast.show('Toast content', 5000)} 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: 'My App', onPress: () => api.toast.show('Toast content', 5000), enabled: true, }); root.append(tile); });