# thom-react-pdf-highlighter

> react-pdf-highlighter, with zoom/scale

Latest version **1.0.5** (published 2023-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install thom-react-pdf-highlighter
pnpm add thom-react-pdf-highlighter
yarn add thom-react-pdf-highlighter
bun add thom-react-pdf-highlighter
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-09-09 |
| First published | 2023-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 254.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Thom719c |
| Maintainers | thom1730 |
| Keywords | pdf, highlight, annotator, react-component |

## Links

- npm: https://www.npmjs.com/package/thom-react-pdf-highlighter
- Repository: https://github.com/Thom719c/thom-react-pdf-highlighter
- Homepage: https://github.com/Thom719c/thom-react-pdf-highlighter#readme
- Issues: https://github.com/Thom719c/thom-react-pdf-highlighter/issues
- npm.io page: https://npm.io/package/thom-react-pdf-highlighter

## Dependencies (3)

- [react-rnd](https://npm.io/package/react-rnd.md) ^10.1.10
- [pdfjs-dist](https://npm.io/package/pdfjs-dist.md) 2.16.105
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-09-09
- 1.0.4 — 2023-09-09
- 1.0.3 — 2023-09-07
- 1.0.2 — 2023-09-05
- 1.0.1 — 2023-09-05
- 1.0.0 — 2023-09-05

## README

This is a little improved copy of [react-pdf-highlighter](https://www.npmjs.com/package/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.

[thom-react-pdf-highlighter](https://github.com/Thom719c/thom-react-pdf-highlighter)

## Getting Started in your own project

1. Install the package using npm:

```bash
npm install thom-react-pdf-highlighter
```

Import the component into your React application, example:
```bash
import {
    PdfLoader,
    PdfHighlighter,
    Tip,
    Highlight,
    Popup,
    AreaHighlight,
} from 'thom-react-pdf-highlighter';
```

# Some of the documentation/readme from react-pdf-highlighter below

## 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.

### Example

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.

### Installation

`npm install react-pdf-highlighter`

See `./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)

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.

---
_Source: https://npm.io/package/thom-react-pdf-highlighter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._