[](https://www.youtube.com/watch?v=7P7DYkTOC0M)
npm install @soubhikchatterjee/react-pdf
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)
---
> npm i @soubhikchatterjee/react-pdf
> npm i -D node-sass
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";
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 (
``