Integrate CloudPDF inside your React.js App

If you already have a React.js project you want to integrate with CloudPDF, then you can simply add the CloudPDF javascript library as a dependency to your project. Let's walk through all the steps to get CloudPDF integrated into your project!

1. Add CloudPDF as a dependency

Now let’s add CloudPDF as a dependency to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location, and run the following command:

Using Yarn

yarn add @openbook/cloudpdf-viewer

Using NPM

npm install @openbook/cloudpdf-viewer --save

2. Import CloudPDF in your component

To use the CloudPDF javascript library, you’ll need to import it into your component.

import CloudPdfViewer from '@openbook/cloudpdf-viewer';

3. Render CloudPDF

Once you've imported the component, you can now render CloudPDF inside your component.
Make sure you obtained a document ID from our upload API or by uploading it in our web app.

import React, { useRef, useEffect } from "react";
import "./styles.css";
import CloudPdfViewer from "@openbook/cloudpdf-viewer";
export default function App() {
const viewer = useRef(null);
useEffect(() => {
CloudPdfViewer(
{
documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
darkMode: true
},
viewer.current
).then((instance) => {});
}, []);
return (
<div className="app">
<div className="viewer" ref={viewer}></div>
</div>
);
}
  • documentId After you upload your document to CloudPDF you will receive a documentId. How to upload a document?
  • darkMode You can set the viewer to light or darkmode by changing this variable to true or false

To view all the options go to viewer options

NOTE: In this example we set our document security to public. After uploading a document, the document is by default set on non-public to guarantee security. To view a document that is not public you must first create a signature on your server or you can change the security settings on a document.