From 886739f43985d1e92da72331b27947d5837b96db Mon Sep 17 00:00:00 2001 From: Artem Tyurin Date: Tue, 9 Jul 2024 12:09:53 +0200 Subject: [PATCH] Update README --- CHANGELOG.md | 20 --------------- README.md | 69 ++++++++++++++-------------------------------------- 2 files changed, 18 insertions(+), 71 deletions(-) delete mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 18de78e6d..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,20 +0,0 @@ -# 6.0.0 - -* Support for React 18 (https://github.com/agentcooper/react-pdf-highlighter/pull/232) -* Fix for `usePdfCoordinates` (https://github.com/agentcooper/react-pdf-highlighter/pull/244) - -# 5.3.0 - -* [Added support of multi-page highlights](https://github.com/agentcooper/react-pdf-highlighter/pull/167), thanks to @jonathanbyrne! - -# 3.0.0 - -* Update PDF.js dependency to 2.2.228. - -# 2.1.1 - -* Enabled hyperlinks inside the PDF document (thanks @steevn). - -# 2.0.0 - -* Renamed `PdfAnnotator` to `PdfHighlighter` all over the code for naming consistency. diff --git a/README.md b/README.md index f58dad595..bb7905a89 100644 --- a/README.md +++ b/README.md @@ -2,67 +2,34 @@ ![Node CI](https://github.com/agentcooper/react-pdf-highlighter/workflows/Node%20CI/badge.svg) -## react-pdf-highlighter +# react-pdf-highlighter -`react-pdf-highlighter` is a [React](https://reactjs.org/) 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. +Set of React components for PDF annotation. -### Example +Features: -For online example check https://agentcooper.github.io/react-pdf-highlighter/. +- Built on top of PDF.js +- Text and image highlights +- Popover text for highlights +- Scroll to highlights + +## Example + +See demo https://agentcooper.github.io/react-pdf-highlighter/. To run the example app locally: -``` +```bash npm install npm start ``` -### Installation - -`npm install react-pdf-highlighter` - -See -[`./example/src/App.tsx`](https://github.com/agentcooper/react-pdf-highlighter/blob/main/example/src/App.tsx) -for React component API example. - -### Prior art - -[`react-pdf`](https://github.com/wojtekmaj/react-pdf) and -[`react-pdfjs`](https://github.com/erikras/react-pdfjs) only provide React -wrappers for PDF.js and do not have built-in annotation functionality. - -[`pdfjs-annotate`](https://github.com/instructure/pdf-annotate.js/) does not -provide text highlights out of the box. - -PDF.js provides only viewer: - -> [PDF.js is mainly written for reading PDF files, not editing them. Because of that we don't yet support adding any kind of annotations. We do however support rendering a number of annotation types for viewing.](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#is-it-possible-to-add-annotations-to-a-pdf) +## Install -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 - -##### Can I get a new PDF with the highlights embedded into the document? - -Take a look at https://pdf-lib.js.org. - -##### Wasn't this named react-pdf-annotator at some point? - -Yes, but people from https://www.pdfannotator.com/ asked me to rename, since [they have a trademark for PDF Annotator](https://www.pdfannotator.com/en/help/infodisclaimer). - -##### I'm trying the demo with my PDF and it is not loading! - -Please check the [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) on your url. It is required for the cross-domain request. +```bash +npm install react-pdf-highlighter +``` -### Compatibility +## How to use -Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet -Explorer. +See [`./example/src/App.tsx`](https://github.com/agentcooper/react-pdf-highlighter/blob/main/example/src/App.tsx) for the React component API example.