This is a little improved copy of react-pdf-highlighter version 6.1.0.
This version includes the ability to zoom/scale, search and customize the content in the tip with your own list, allowing you to replace the default emojis. However, you can still choose to use the default emojis if you prefer.
- Install the package using npm:
npm install thom-react-pdf-highlighter
Import the component into your React application, example:
import {
PdfLoader,
PdfHighlighter,
Tip,
Highlight,
Popup,
AreaHighlight,
} from 'thom-react-pdf-highlighter';
react-pdf-highlighter
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.
To run the example app locally:
npm install
npm start
Create React App example is available in ./create-react-app-example
. Make sure to run npm install
there as well.
npm install react-pdf-highlighter
See ./example/src/App.tsx
for React component API example.
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/
Take a look at https://pdf-lib.js.org.
Yes, but people from https://www.pdfannotator.com/ asked me to rename, since they have a trademark for PDF Annotator.
Please check the CORS headers on your url. It is required for the cross-domain request.