@simplepdf/react-embed-pdf

SimplePDF React Embed

Add a powerful PDF editor directly into your React App.

Read more about SimplePDF Embed »

Join Our Discord · Follow us on Twitter

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.eu/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.eu/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.eu/simple-pdf/assets/sample.pdf"
/>

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

Available props

Name	Type	Required	Description
mode	"inline" | "modal"	No (defaults to "modal")	Inline the editor or display it inside a modal
locale	"en" | "de" | "es" | "fr" | "it" | "pt"	No (defaults to "en")	Language to display the editor in (ISO locale)
children	React.ReactElement	Yes in "modal" mode	Elements triggering the editor
companyIdentifier	string	No	Allows collecting customers submissions
context	Record<string, unknown>	No	Sent via webhooks
onEmbedEvent	(event: EmbedEvent) => Promise | void	No	Events sent by the Iframe
documentURL	string	No	Supports blob URLs, CORS URLs, and authenticated URLs (against the same origin). Available for inline mode only
style	React.CSSProperties	No	Available for inline mode only
className	string	No	Available for inline mode only

How to dev

1. Link the widget

yarn link
yarn start

2. Use it in the target application

yarn link @simplepdf/react-embed-pdf