
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
react-custom-pdf-highlighter
Advanced tools
Supply Chain Security
Vulnerability
Quality
Maintenance
License
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 4 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.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.