Page {pageNumber} of {numPages}
);
}
```
Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/master/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/).
### Enable PDF.js worker
It is crucial for performance to use PDF.js worker whenever possible. This ensures that PDF files will be rendered in a separate thread without affecting page performance. To make things a little easier, we've prepared several entry points you can use.
#### Webpack
Instead of directly importing modules you need from `'react-pdf'`, import them like so:
```js
// using ES6 modules
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
// using CommonJS modules
import { Document, Page } from 'react-pdf/dist/umd/entry.webpack';
```
#### Parcel
Instead of directly importing modules you need from `'react-pdf'`, import them like so:
```js
// using ES6 modules
import { Document, Page } from 'react-pdf/dist/esm/entry.parcel';
// using CommonJS modules
import { Document, Page } from 'react-pdf/dist/umd/entry.parcel';
```
#### Create React App
Create React App uses Webpack under the hood, so you can follow [Webpack instructions](#webpack).
[Standard instructions](#standard-browserify-and-others) will also work. In Create React App, you can copy `pdf.worker.js` file from `pdfjs-dist/build` to `public` directory in order for it to be copied to your project's output folder at build time.
#### Standard (Browserify and others)
If you use Browserify or other bundling tools, you will have to make sure on your own that `pdf.worker.js` file from `pdfjs-dist/build` is copied to your project's output folder.
If you don't need to debug `pdf.worker.js`, you can use `pdf.worker.min.js` file instead, which is roughly half the size. For this to work, however, you will need to specify `workerSrc` manually like so:
```js
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';
```
Alternatively, you could use the minified `pdf.worker.min.js` from an external CDN:
```js
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
```
### 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:
```js
// using ES6 modules
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
// using CommonJS modules
import 'react-pdf/dist/umd/Page/AnnotationLayer.css';
```
### Support for non-latin characters
If you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:
```
Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.
```
then you would also need to include cMaps in your build and tell React-PDF where they are.
#### Copying cMaps
First, you need to copy cMaps from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). cMaps are located in `pdfjs-dist/cmaps`.
##### Webpack
Add `copy-webpack-plugin` to your project if you haven't already:
```
npm install copy-webpack-plugin --save-dev
```
Now, in your Webpack config, import the plugin:
```js
import CopyWebpackPlugin from 'copy-webpack-plugin';
```
and in `plugins` section of your config, add the following:
```js
new CopyWebpackPlugin([
{
from: 'node_modules/pdfjs-dist/cmaps/',
to: 'cmaps/'
},
]),
```
##### Parcel, Browserify and others
If you use Parcel, Browserify or other bundling tools, you will have to make sure on your own that cMaps are copied to your project's output folder.
#### Setting up React-PDF
Now that you have cMaps in your build, pass required options to Document component by using `options` prop, like so:
```js