Skip to content

Latest commit

 

History

History
201 lines (166 loc) · 5.09 KB

README.md

File metadata and controls

201 lines (166 loc) · 5.09 KB



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.

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"
/>;

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
  1. Use it in the target application
yarn link @simplepdf/react-embed-pdf