react-fast-scroll-pdf
Advanced tools
A small, super-fast javascript PDF renderer
We needed a way to very quickly render a complete PDF document but without using a lot of canvas elements (iPads etc limit the amount of canvas memory). This uses a single canvas element and uses pdfjs-dist to render each pdf page before converting it to a PNG image. PDF annotations are then placed on top of the image so that links etc still work.
[screenshot)
To get a local copy up and running follow these simple steps.
npm install --save react-fast-scroll-pdf
git clone https://github.com/wearemothership/react-fast-scroll-pdf
We have provied some demos of how this can be used in your project.
git clone https://github.com/wearemothership/react-fast-scroll-pdf
cd react-fast-scroll-pdf
npm install
npm run example
Some usage examples of how this can be used in you project.
import the FastScrollPDF component and pass in the required props
import React, { SyntheticEvent, useState } from "react";
import { FastScrollPDF } from "react-fast-scroll-pdf";
const App = (): JSX.Element => {
const [file, setFile] = useState<Uint8Array>();
const sourceOptions = {
data: file
};
const fileChanged = (ev: SyntheticEvent<HTMLInputElement>) => {
const target = ev.target as HTMLInputElement;
const newFile = target.files?.[0];
if (newFile) {
const fileReader = new FileReader();
fileReader.onload = (e) => {
const { result } = e.target as FileReader;
const arr = new Uint8Array(result as ArrayBuffer);
setFile(arr);
};
fileReader.readAsArrayBuffer(newFile);
}
};
return (
<div className="App">
<input type="file" onChange={fileChanged} />
{ file ? <FastScrollPDF source={sourceOptions} /> : null }
</div>
);
};
export default App;
This is something that you may wish to do if you want to apply your own styles or get access to the individual components to sort layout out in your own way. Here you're going to use the components along with the hook to give you lots of control over how you display the PDF.
Note: For reloading the PDF effeciently you should pass in refs to the PDFDocument component and then use those refs for changeZoom. If you choose not to use the refs, it will all still work but instead of reloading from the currently active page, it will reload from page 1.
import React, { SyntheticEvent, useState } from "react";
import { ZoomButtons, PDFDocument, usePDF } from "react-fast-scroll-pdf";
const App = (): JSX.Element => {
const [file, setFile] = useState<Uint8Array>();
const sourceOptions = {
data: file
};
const scrollContainerRef = useRef();
const viewerRef = useRef();
const { pages, changeZoom } = usePDF({ source });
const fileChanged = (ev: SyntheticEvent<HTMLInputElement>) => {
const target = ev.target as HTMLInputElement;
const newFile = target.files?.[0];
if (newFile) {
const fileReader = new FileReader();
fileReader.onload = (e) => {
const { result } = e.target as FileReader;
const arr = new Uint8Array(result as ArrayBuffer);
setFile(arr);
};
fileReader.readAsArrayBuffer(newFile);
}
};
const zoomChange = (newZoom: number) => {
changeZoom({
scale: newZoom, viewer: viewerRef.current, scrollContainer: scrollContainerRef.current
});
};
return (
<div className="App">
<input type="file" onChange={fileChanged} />
<ZoomButtons zoomChange={zoomChange} />
<PDFDocument scrollContainerRef={scrollContainerRef} viewerRef={viewerRef} pages={pages} />
</div>
);
};
export default App;
You can import the usePDF hook element into React as below (see Example above to see this running)
import React, { SyntheticEvent, useRef, useState } from 'react';
import { usePDF } from "react-fast-scroll-pdf";
const App = (): JSX.Element => {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const viewerRef = useRef<HTMLDivElement>(null);
const [zoom, setZoom] = useState<number>(1);
const [file, setFile] = useState<Uint8Array>();
const sourceOptions = {
data: file
}
const { pages, changeZoom } = usePDF({
source: sourceOptions
})
const ZOOM_CHANGE: number = 0.1;
const zoomIn = () => {
const newZoom = zoom + ZOOM_CHANGE;
if (newZoom > 0) {
setZoom(newZoom);
changeZoom({
scale: newZoom, viewer: viewerRef.current, scrollContainer: scrollContainerRef.current
});
}
}
const zoomOut = () => {
const newZoom = zoom - ZOOM_CHANGE;
if (newZoom < 2) {
setZoom(newZoom);
changeZoom({
scale: newZoom, viewer: viewerRef.current, scrollContainer: scrollContainerRef.current
});
}
}
const fileChanged = (ev: SyntheticEvent<HTMLInputElement>) => {
const target = ev.target as HTMLInputElement;
const file = target.files?.[0]
if (file) {
var fileReader = new FileReader();
fileReader.onload = (e) => {
const { result } = e.target as FileReader;
const arr = new Uint8Array(result as ArrayBuffer);
setFile(arr);
};
fileReader.readAsArrayBuffer(file);
}
}
return (
<div className="App">
<input type="file" onChange={fileChanged} />
<div id="scrollContainer" ref={scrollContainerRef} style={{ overflow: "scroll", height: "800px" }}>
<div id="viewer" ref={viewerRef}>
{pages}
</div>
</div>
<button type="button" onClick={zoomIn}>+</button>
<button type="button" onClick={zoomOut}>-</button>
</div>
);
}
These two components can be accessed via an import and may be useful if you wish to add additional pages to the page list returned by the usePDF hook.
You can find details of the options available on the source object here.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)Distributed under the MIT License. https://github.com/wearemothership/react-fast-scroll-pdf/blob/main/LICENSE.md
Copyright (c) 2021 Mothership Software Ltd.
Please let us know if you wish us to add your project to this list.
FAQs
Image-based PDF viewer using pdfjs
The npm package react-fast-scroll-pdf receives a total of 92 weekly downloads. As such, react-fast-scroll-pdf popularity was classified as not popular.
We found that react-fast-scroll-pdf demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.