
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
react-custom-pdf-highlighter
Advanced tools
react-custom-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.
npm i react-custom-pdf-highlighter
or
yarn add react-custom-pdf-highlighter
import { PopupHighlighter } from 'react-custom-pdf-highlighter';
// Inside of a component's render() method:
render() {
return (
<PopupHighlighter
features={{ width: 1000, height: 700, top: 100, left: 100 }}
center=false // You need to explicitly say "false" for "top" and "left" to work!!
title='PDF Viewer' // default PDF Viewer
searchObj=searchObj
pdfUrl= URL // URL = pdf_url
mark=true // true to highlight & default true
/>
);
}
import { CustomHighlighter } from 'react-custom-pdf-highlighter';
// Inside of a component's render() method:
render() {
return (
<CustomHighlighter
searchObj=searchObj
pdfUrl= URL // URL = pdf_url
mark=true // true to highlight & default true
/>
);
}
searchObj: {
content: { "text": '' }, // default empty string - required filed
position: {
"boundingRect": { "x1": 30, "y1": 30, "x2": 30, "y2": 30, "width": pdf_width || 612, "height": pdf_height || 792 },
"rects": [{ "x1": 30, "y1": 30, "x2": 30, "y2": 30, "width": pdf_width || 612, "height": pdf_height || 792 }],
"pageNumber": 1 // default 1
}
comment: {
"text": "",
"emoji": ""
}
}
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:
Please check the CORS headers on your url. It is required for the cross-domain request.
Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet Explorer.
FAQs
Set of React components for PDF annotation
The npm package react-custom-pdf-highlighter receives a total of 2 weekly downloads. As such, react-custom-pdf-highlighter popularity was classified as not popular.
We found that react-custom-pdf-highlighter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.