Skip to content

Latest commit

 

History

History
302 lines (251 loc) · 9.7 KB

README.md

File metadata and controls

302 lines (251 loc) · 9.7 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"
/>;

Programmatic Control

Some actions require a SimplePDF account

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

Action Description
actions.goTo({ page }) Navigate to a specific page
actions.selectTool(toolType) Select a tool: 'TEXT', 'BOXED_TEXT', 'CHECKBOX', 'PICTURE', 'SIGNATURE', or null to deselect (CURSOR)
actions.createField(options) Create a field at specified position (see below)
actions.clearFields(options?) Clear fields by fieldIds or page, or all fields if no options
actions.getDocumentContent({ extractionMode }) Extract document content (extractionMode: 'auto' or 'ocr')
actions.submit({ downloadCopyOnDevice }) Submit the document

All actions return a Promise with a result object: { success: true, data: ... } or { success: false, error: { code, message } }.

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

const Editor = () => {
  const { embedRef, actions } = useEmbed();

  const handleSubmit = async () => {
    const result = await actions.submit({ downloadCopyOnDevice: false });
    if (result.success) {
      console.log('Submitted!');
    }
  };

  const handleExtract = async () => {
    const result = await actions.getDocumentContent({ extractionMode: 'auto' });
    if (result.success) {
      console.log('Document name:', result.data.name);
      console.log('Pages:', result.data.pages);
    }
  };

  const handleCreateTextField = async () => {
    const result = await actions.createField({
      type: 'TEXT',
      page: 1,
      x: 100,
      y: 200,
      width: 150,
      height: 30,
      value: 'Hello World',
    });
    if (result.success) {
      console.log('Created field:', result.data.field_id);
    }
  };

  return (
    <>
      <button onClick={handleSubmit}>Submit</button>
      <button onClick={handleExtract}>Extract Content</button>
      <button onClick={handleCreateTextField}>Add Text Field</button>
      <button onClick={() => actions.selectTool('TEXT')}>Select Text Tool</button>
      <button onClick={() => actions.goTo({ page: 2 })}>Go to Page 2</button>
      <EmbedPDF
        companyIdentifier="yourcompany"
        ref={embedRef}
        mode="inline"
        style={{ width: 900, height: 800 }}
        documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
      />
    </>
  );
};

createField options

The createField action uses a discriminated union based on field type:

Type value format
TEXT / BOXED_TEXT Plain text content
CHECKBOX 'checked' or 'unchecked'
PICTURE Data URL (base64)
SIGNATURE Data URL (base64) or plain text (generates typed signature)

All field types share these base options: page, x, y, width, height (coordinates in PDF points, origin at bottom-left).

See Retrieving PDF Data for text extraction, downloading, and server-side storage options.

Available props

Name Type Required Description
ref EmbedActions No Used for programmatic control of the editor (see Programmatic Control section)
mode "inline" | "modal" No (defaults to "modal") Inline the editor or display it inside a modal
locale "en" | "de" | "es" | "fr" | "it" | "nl" | "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 Your SimplePDF portal. See Data Privacy & companyIdentifier for reserved values and data handling details.
baseDomain string No Override the base domain for self-hosted deployments (e.g., "yourdomain.com"). Contact sales@simplepdf.com for enterprise self-hosting
context Record<string, unknown> No Sent via webhooks
onEmbedEvent (event: EmbedEvent) => Promise<void> | 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
npm link
npm start
  1. Use it in the target application
npm link @simplepdf/react-embed-pdf