# PrintPreview


  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.

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

```

## PrintPreview

Renders a preview of a printable document. This component must a direct child of the Screen component.

### PrintPreviewProps

### src

value: `string`

The source to print.

The src must be either:
- A relative path that will be appended to your app's [application_url](https://shopify.dev/docs/apps/build/cli-for-apps/app-configuration#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

## Related

- [Print API](/api/pos-ui-extensions/apis/print-api)
- [Build a Print Extension](https://shopify.dev/docs/api/pos-ui-extensions/examples/print-extension)