JSPM – @simplepdf/react-embed-pdf@1.9.0

Package Exports

@simplepdf/react-embed-pdf
@simplepdf/react-embed-pdf/dist/index.cjs
@simplepdf/react-embed-pdf/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@simplepdf/react-embed-pdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Add a powerful PDF editor directly into your React App.

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

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

Available props

Name	Type	Required	Description
ref	EmbedRefHandlers	No	Used for programmatic control of the editor
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

Link the widget

yarn link
yarn start

Use it in the target application

yarn link @simplepdf/react-embed-pdf

@simplepdf/react-embed-pdf