npm package: @omysoul/svelte-pdf-viewer
Description: ```bash npm install @omysoul/svelte-pdf-view ```
Latest version: 0.0.3

# @omysoul/svelte-pdf-view

```bash
npm install @omysoul/svelte-pdf-view
```

This component renders PDF pages responsively. There are three components:

- PdfPage: responsive using a resizeObserver
- PdfFullScreen: renders PDF full screen using window.onResize
- PdfThumbnail: renders PDF with auto height

## PdfPage

Creates a canvas that adapts its size to its container.
You can use the `style` prop to define how the container size.

```html
<script>
  import { PdfPage } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfPage
  src="hello.pdf"
  page="{1}"
  style="width: 50%; height: 300px; position: relative; overflow: hidden;"
  bind:numPages
/>
```

### Props

| Prop       |                                                                         |
| ---------- | ----------------------------------------------------------------------- |
| page       | page number to display                                                  |
| src        | PDF to be loaded                                                        |
| style      | div to be measured to get width of canvas                               |
| numPages   | you can bind to this                                                    |
| blank      | boolean                                                                 |
| worker     | default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js" |
| background | letter box color                                                        |
| transition | number in seconds default 1, 0 is instant                               |

## PdfPage

Auto generates the hight of the canvas from aspect ratio of PDF page and width of the element `style` is applied to. If applying a style to the measure element you only need to apply a width.

```html
<script>
  import { PdfThumbnail } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfThumbnail src="hello.pdf" page="{1}" style="width: 80vw;" bind:numPages />
```

### Props

| Prop     |                                                                         |
| -------- | ----------------------------------------------------------------------- |
| page     | page number to display                                                  |
| src      | PDF to be loaded                                                        |
| style    | normal HTML style attribute                                             |
| numPages | you can bind to this                                                    |
| worker   | default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js" |

## PdfFullScreen

Similar to `PdfPage` but uses window.onResize and can only be used to display pdf full screen.

```html
<script>
  import { PdfFullScreen } from "omysoul/svelte-pdf-viewer";
  let numPages;
</script>

<PdfFullScreen src="hello.pdf" page="{1}" />
```

### Props

| Prop       |                                                                         |
| ---------- | ----------------------------------------------------------------------- |
| page       | page number to display                                                  |
| src        | PDF to be loaded                                                        |
| numPages   | you can bind to this                                                    |
| blank      | boolean                                                                 |
| worker     | default: "https://unpkg.com/pdfjs-dist@2.4.456/build/pdf.worker.min.js" |
| background | letter box color                                                        |
| transition | number in seconds default 1, 0 is instant                               |

## [Storybook](https://bafybeidbsoo4xpzk2p6rfq2jdptv74if2wfqfhynn7e2nixfwjxndrgc6i.ipfs.infura-ipfs.io/)