Print
component
A component that displays a preview of a printable document.
Note
This component must be a direct child of the Screen component and cannot be nested inside any other component.
Anchor to printpreviewPrintPreview
Renders a preview of a printable document. This component must a direct child of the Screen component.
- stringrequired
The source to print.
The src must be either:
- A relative path that will be appended to your app's application_url
- A full URL to your app's backend that will be used to return the document
Supported document types:
- HTML documents (recommended for best printing experience)
- Text files
- Image files (PNG, JPEG, etc.)
- PDF files
Was this section helpful?
Basic PrintPreview
import React from 'react';
import {
Screen,
reactExtension,
Button,
PrintPreview,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi<'pos.home.modal.render'>();
return (
<Screen name="Home" title="Home">
<Button
title="Print"
onPress={() =>
api.print.print('/documents/test-print')
}
/>
<PrintPreview src="/documents/test-print" />
</Screen>
);
};
export default reactExtension(
'pos.home.modal.render',
() => <Modal />,
);
Examples
Basic PrintPreview
Description
Basic usage with relative and full URLs:
React
import React from 'react'; import { Screen, reactExtension, Button, PrintPreview, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const Modal = () => { const api = useApi<'pos.home.modal.render'>(); return ( <Screen name="Home" title="Home"> <Button title="Print" onPress={() => api.print.print('/documents/test-print') } /> <PrintPreview src="/documents/test-print" /> </Screen> ); }; export default reactExtension( 'pos.home.modal.render', () => <Modal />, );TS
import { Button, PrintPreview, Screen, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root, api) => { const homeScreen = root.createComponent( Screen, { name: 'Home', title: 'Home', }, ); const printButton = root.createComponent( Button, { title: 'Print', onPress: () => api.print.print( '/documents/test-print', ), }, ); const printPreview = root.createComponent( PrintPreview, { src: '/documents/test-print', }, ); homeScreen.append(printPreview); homeScreen.append(printButton); root.append(homeScreen); }, );
Preview
