Skip to main content

PrintPreview
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.

Anchor to src
src
string
required

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 />,
);

Preview

Anchor to relatedRelated

Handle print operationsPrint API
Learn how to implement printingBuild a Print Extension