SimplePDF straight into your React app
npm install @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.
``sh`
npm install @simplepdf/react-embed-pdf
The EmbedPDF component has two modes: "modal" (default) and "inline".
_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';
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
`
Render the PDF editor directly in your app
`jsx
import { EmbedPDF } from "@simplepdf/react-embed-pdf";
// The PDF is displayed when rendering the component
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
/>
// The PDF picker is displayed when rendering the component
style={{ width: 900, height: 800 }}
/>
`
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
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/sample.pdf"
/>;
`
_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 (
<>
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).
| 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 | Allows collecting customers submissions |
| 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 | 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 |
1. Link the widget
`sh`
npm link
npm start
2. Use it in the target application
`sh``
npm link @simplepdf/react-embed-pdf