Skip to content

Commit

Permalink
Move Usage section in README below "Configure PDF.js worker"
Browse files Browse the repository at this point in the history
Since you can't really start using React-PDF without configuring PDF.js worker, this order did not make sense.
  • Loading branch information
wojtekmaj committed Jul 21, 2023
1 parent 737af27 commit a8262e6
Showing 1 changed file with 31 additions and 31 deletions.
62 changes: 31 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,37 +90,6 @@ module.exports = {
}
```

### Usage

Here's an example of basic usage:

```tsx
import { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);

function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}

return (
<div>
<Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
}
```

Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-pdf/wiki/Recipes) in [React-PDF Wiki](https://github.com/wojtekmaj/react-pdf/wiki/).

### Configure PDF.js worker

For React-PDF to work, PDF.js worker needs to be provided. You have several options.
Expand Down Expand Up @@ -204,6 +173,37 @@ or:
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;
```

### Usage

Here's an example of basic usage:

```tsx
import { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
const [numPages, setNumPages] = useState<number>();
const [pageNumber, setPageNumber] = useState<number>(1);

function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
setNumPages(numPages);
}

return (
<div>
<Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>
);
}
```

Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-pdf/wiki/Recipes) in [React-PDF Wiki](https://github.com/wojtekmaj/react-pdf/wiki/).

### Support for annotations

If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:
Expand Down

0 comments on commit a8262e6

Please sign in to comment.