react-fast-scroll-pdf

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)
**

$3

To get a local copy up and running follow these simple steps.

#### Prerequisites
- [node
- npm

#### Install via npm
``bash
npm install --save react-fast-scroll-pdf
`

#### Or clone locally
`bash
git clone https://github.com/wearemothership/react-fast-scroll-pdf
`
**

$3

##### Or build and run the demos locally
`bash
git clone https://github.com/wearemothership/react-fast-scroll-pdf
cd react-fast-scroll-pdf
npm install
npm run example
`
**

$3

Some usage examples of how this can be used in you project.

#### Simple
import the FastScrollPDF component and pass in the required props
`jsx
import React, { SyntheticEvent, useState } from "react";
import { FastScrollPDF } from "react-fast-scroll-pdf";

const App = (): JSX.Element => {
const [file, setFile] = useState();
const sourceOptions = {
data: file
};

const fileChanged = (ev: SyntheticEvent) => {
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 (


export default App;
`

#### Medium
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 efficiently 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.
`jsx
import React, { SyntheticEvent, useState } from "react";
import { ZoomButtons, PDFDocument, usePDF } from "react-fast-scroll-pdf";

const App = (): JSX.Element => {
const [file, setFile] = useState();
const sourceOptions = {
data: file
};
const scrollContainerRef = useRef();
const viewerRef = useRef();
const {
pages,
changeZoomStart,
changeZoomEnd,
renderCurrentPage
} = usePDF({
source,
scrollContainer: scrollContainerRef.current,
viewer: viewerRef.current
});

// Recommend debouncing this code, e.g. lodash debounce.
const scrollDocument = () => renderCurrentPage();

const fileChanged = (ev: SyntheticEvent) => {
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 zoomChangeStart = useCallback((newZoom: number) => {
// This causes the pages to zoom in, but in low quality.
changeZoomStart(newZoom);
}, [changeZoomStart]);

const zoomChangeEnd = useCallback(() => {
// This tells the renderer to recreate all of the images.
changeZoomEnd();
}, [changeZoomEnd])

// Allows the page to be zoomed to fit to the page width
// This is OPTIONAL
const fitPage = useCallback(() => {
if (viewportWidth && scrollContainerRef.current) {
const initial = viewportWidth / zoom;
const scale = (scrollContainerRef.current.offsetWidth / initial) * 0.95;
doZoom(scale);
changeZoomEnd();
return scale;
}
return undefined;
}, [viewportWidth, doZoom, changeZoomEnd, zoom]);

useEffect(() => {
const oldRef = scrollContainerRef.current;
scrollContainerRef.current?.addEventListener("scroll", scrollDocument);

return () => oldRef?.removeEventListener("scroll", scrollDocument);
}, [scrollDocument]);

return (


export default App;
`

#### Hard
You can import the usePDF hook element into React as below (see Example above to see this running)

`jsx
import React, { SyntheticEvent, useRef, useState } from 'react';
import { usePDF } from "react-fast-scroll-pdf";

const App = (): JSX.Element => {
const scrollContainerRef = useRef(null);
const viewerRef = useRef(null);
const [zoom, setZoom] = useState(1);
const [file, setFile] = useState();
const sourceOptions = {
data: file
}
const {
pages,
changeZoomStart,
changeZoomEnd,
renderCurrentPage
} = usePDF({
source: sourceOptions,
scrollContainer: scrollContainerRef.current,
viewer: viewerRef.current
})
const ZOOM_CHANGE: number = 0.1;

// Recommend debouncing this, e.g. lodash debounce.
const scrollDocument = () => renderCurrentPage();

const zoomIn = useCallback(() => {
const newZoom = zoom + ZOOM_CHANGE;
if (newZoom > 0) {
setZoom(newZoom);
changeZoomStart(newStart);
}
}, [changeZoomStart]);

const zoomOut = useCallback(() => {
const newZoom = zoom - ZOOM_CHANGE;
if (newZoom < 2) {
setZoom(newZoom);
changeZoomStart(newZoom);
}
}, [changeZoomStart]);

const zoomEnd = useCallback(() => {
changeZoomEnd();
}, [changeZoomEnd]);

const fileChanged = useCallback((ev: SyntheticEvent) => {
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 (


1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature`)
5. Open a Pull Request
**

$3

Distributed under the MIT License.
https://github.com/wearemothership/react-fast-scroll-pdf/blob/main/LICENSE.md

Copyright (c) 2021 Mothership Software Ltd.
**

$3

Please let us know if you wish us to add your project to this list.
**

$3