PrintPreview

A component that displays a preview of a printable document. Use this component to let users review documents before printing. The `src` prop accepts either: - A relative path that will be appended to your app's [application_url](/docs/apps/build/cli-for-apps/app-configuration#application_url) - A full URL to your document endpoint Supported document types: - HTML documents (recommended for best preview experience) - Text files - Image files (PNG, JPEG, etc.) - PDF files (Note: On Android devices, PDFs will be downloaded and must be printed using an external application)

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

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

PrintPreview

Basic PrintPreview

PrintPreview

PrintPreviewProps

src

Related