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

Usage

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(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

/src/App.js

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

 <ReactPDF
      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 (
    <div className="App">
      <ReactPDF
        uniqueId={Math.random()}
        filename="c4611_sample_explain.pdf"
        pdfUrl="https://api.allorigins.win/raw?url=https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
      />
    </div>
  );
}