@simplepdf/react-embed-pdf NPM

Easily add SimplePDF to your React app, by using the EmbedPDF component.

Demo

Install

npm install @simplepdf/react-embed-pdf

How to use it

The EmbedPDF component has two modes: "modal" (default) and "inline".

List of all available props

Account-specific features

The features below require a SimplePDF account

While the component does not require any account to be used (without any limits), you can specify the companyIdentifier to:

Example

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

<EmbedPDF companyIdentifier="yourcompany">
  <a href="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf">Opens sample.pdf</a>
</EmbedPDF>;

Modal mode

Wrap any HTML element with EmbedPDF to open a modal with the editor on user click.

import { EmbedPDF } from "@simplepdf/react-embed-pdf";

// Opens the PDF on click
<EmbedPDF>
  <a href="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf">
    Opens sample.pdf
  </a>
</EmbedPDF>

// Let the user pick the PDF
<EmbedPDF>
  <button>Opens the simplePDF editor</button>
</EmbedPDF>

Inline mode

Render the PDF editor directly in your app

import { EmbedPDF } from "@simplepdf/react-embed-pdf";

// The PDF is displayed when rendering the component
 <EmbedPDF
  mode="inline"
  style={{ width: 900, height: 800 }}
  documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
/>

// The PDF picker is displayed when rendering the component
 <EmbedPDF
  mode="inline"
  style={{ width: 900, height: 800 }}
/>

Viewer mode only

Specify react-viewer as companyIdentifier to disable the editing features:

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

// The PDF is displayed using the viewer: all editing features are disabled
<EmbedPDF
  companyIdentifier="react-viewer"
  mode="inline"
  style={{ width: 900, height: 800 }}
  documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
/>;

Programmatic Control

Requires a SimplePDF account

Use const { embedRef, actions } = useEmbed(); to programmatically control the embed editor:

actions.submit: Submit the document (specify or not whether to download a copy of the document on the device of the user)
actions.selectTool: Select a tool to use

import { EmbedPDF, useEmbed } from "@simplepdf/react-embed-pdf";

const { embedRef, actions } = useEmbed();

return (
   <>
      <button onClick={() => await actions.submit({ downloadCopyOnDevice: false })}>Submit</button>
      <button onClick={() => await actions.selectTool('TEXT')}>Select Text Tool</button>
      <EmbedPDF
         companyIdentifier="yourcompany"
         ref={embedRef}
         mode="inline"
         style={{ width: 900, height: 800 }}
         documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
      />
   </>
);