highlight-pdfs-in-react v1.0.4
highlight-pdfs-in-react
highlight-pdfs-in-react
is a React library that provides annotation experience for PDF documents on web. It is built on top of PDF.js by Mozilla. Text and rectangular highlights are supported. Highlight
data format is independent of the viewport, making it suitable for saving on the
server.
Example (Create React App)
For online example check https://github.com/shaynethiessen/highlight-pdfs-in-react.
To run the example app locally:
npm install
npm start
While docs are in progress, feel free to check the source annotated with Flow type signatures.
Installation
npm install highlight-pdfs-in-react
or
yarn add highlight-pdfs-in-react
See
packages/example/src/App.js
for React component API example.
Prior art
react-pdf
and
react-pdfjs
only provide React
wrappers for PDF.js and do not have built-in annotation functionality.
pdfjs-annotate
does not
provide text highlights out of the box.
PDF.js provides only viewer:
See also:
- https://github.com/mozilla/pdf.js
- https://github.com/wojtekmaj/react-pdf
- https://github.com/erikras/react-pdfjs
- https://github.com/instructure/pdf-annotate.js/
- https://blogs.dropbox.com/tech/2016/11/annotations-on-document-previews/
FAQ
I'm trying the demo with my PDF and it is not loading!
Please check the CORS headers on your url. It is required for the cross-domain request.
Compatibility
Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet Explorer.
PDF.js worker thread
The default worker is an inline "fake" worker. To improve performance, either add the worker-loader (preferred) to your webpack config or use the inline loader syntax.
Webpack config example snippet
Use this if have your own config
{
...
module: {
rules: [
{
test: /\.worker\.js$/,
use: 'worker-loader',
},
...
]
}
}
Inline Webpack-loader syntax
Use in Create React App projects
import PDFWorker from "worker-loader!pdfjs-dist/lib/pdf.worker";
import {setPdfWorker} from 'highlight-pdfs-in-react;
setPdfWorker(PDFWorker);
...