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

Show me an example!

Install

npm install @simplepdf/react-embed-pdf

How to use it

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

It can be tied to a SimplePDF account.

Account-specific features

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

• Aautomatically collect your users' submissions
• Customize the editor and use your own branding
• Use your own storage
• Configure webhooks

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 }}
/>

Available props

How to dev

1. Link the widget

yarn link
yarn start

2. Use it in the target application

yarn link @simplepdf/react-embed-pdf