React PDF Viewer


View PDF files in your react project. Supports the following features:

- Zoom Pages
- Next and Prev buttons to navigate between pages
- Rotate a Page
- Page Scrolling
- Rearrange Pages
- Thumbnail Preview


(click on the image above to watch video demo)

Fullpage Screenshot!

Live Demo on Netlify

Code Demo on CodeSandBox

Code Example on Github

---

Install

> npm i @soubhikchatterjee/react-pdf

> npm i -D node-sass

$3

This module uses React/Redux to pass props/data from one component to another. Please follow the following setup instructions.

/index.js

``
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { store } from "@soubhikchatterjee/react-pdf/dist/store/store";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(




,
rootElement
);
`

/src/App.js

`

import ReactPDF from "@soubhikchatterjee/react-pdf";

uniqueId={Math.random()}
filename="sample.pdf"
pdfUrl="https://example.com/sample.pdf"
/>
`

If you want to see the list of all pages along with their changes (rotation angle, reordered page) use the following code

/src/App.js

`
import { useEffect } from "react";
import ReactPDF from "@soubhikchatterjee/react-pdf";
import { useSelector } from "react-redux";
import * as AppAction from "@soubhikchatterjee/react-pdf/dist/store/actions/app.action";

export default function App() {
const pageChanges = useSelector(
(state) => state.appReducer[AppAction.PAGE_CHANGES]
);

useEffect(() => {
if (pageChanges) {
console.log(pageChanges);
}
}, [pageChanges]);

return (


``