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:

• Automatically collect your users' submissions
• Customize the editor and use your own branding
• Configure webhooks
• Use your own storage: S3-compatible / Azure Blob Storage

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).

Available props

How to dev

1. Link the widget

npm link
npm start

2. Use it in the target application

npm link @simplepdf/react-embed-pdf