@simplepdf/react-embed-pdf

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

``sh
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

$3

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

`jsx
import { EmbedPDF } from '@simplepdf/react-embed-pdf';


Opens sample.pdf
;
`

$3

Wrap any HTML element with EmbedPDF to open a modal with the editor on user click.

`jsx
import { EmbedPDF } from "@simplepdf/react-embed-pdf";

// Opens the PDF on click


Opens sample.pdf



// Let the user pick the PDF

Opens the simplePDF editor

`

$3

Render the PDF editor directly in your app

`jsx
import { EmbedPDF } from "@simplepdf/react-embed-pdf";

// The PDF is displayed when rendering the component
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
mode="inline"
style={{ width: 900, height: 800 }}
/>
`

$3

Specify react-viewer as companyIdentifier to disable the editing features:

`jsx
import { EmbedPDF } from '@simplepdf/react-embed-pdf';

// The PDF is displayed using the viewer: all editing features are disabled
companyIdentifier="react-viewer"
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
/>;
`

$3

_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 } }.

`jsx
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 (
<>
Submit
Extract Content
Add Text Field
actions.selectTool('TEXT')}>Select Text Tool
actions.goTo({ page: 2 })}>Go to Page 2
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).

$3

How to dev

1. Link the widget

`sh
npm link
npm start
`

2. Use it in the target application

`sh
npm link @simplepdf/react-embed-pdf
``