Add a powerful PDF editor directly into your React App.

Easily add [SimplePDF](https://simplepdf.com) to your React app, by using the `EmbedPDF` component. ## [Demo](https://codesandbox.io/p/sandbox/m8p3gz) ## Install ```sh npm install @simplepdf/react-embed-pdf ``` ## Related documentation For shared product behavior and account-specific features, see the main embed README: - [Data Privacy & `companyIdentifier`](../README.md#data-privacy--companyidentifier) - [Branding Configuration](../README.md#branding-configuration) - [Retrieving PDF Data](../README.md#retrieving-pdf-data) - [Page Manipulation](../README.md#page-manipulation) - [FAQ](../README.md#faq) ## How to use it The `EmbedPDF` component has two modes: `"modal"` (default) and `"inline"`. **[List of all available props](#available-props)** ### Account-specific features _The features below require a [SimplePDF account](https://simplepdf.com/pricing#g)_ 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, configure webhooks, and use BYOS](../README.md#retrieving-pdf-data) - [Customize branding and white-label behavior](../README.md#branding-configuration) - [Use company mode instead of the default mode](../README.md#data-privacy--companyidentifier) _Example_ ```jsx import { EmbedPDF } from '@simplepdf/react-embed-pdf'; Opens sample.pdf ; ``` ### Modal mode 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 ``` ### Inline mode Render the PDF editor directly in your app ```jsx import { EmbedPDF } from "@simplepdf/react-embed-pdf"; // The PDF is displayed when rendering the component // The PDF picker is displayed when rendering the component ``` ### Viewer mode only 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 ; ``` See [Data Privacy & `companyIdentifier`](../README.md#data-privacy--companyidentifier) for reserved values and mode behavior. ### Programmatic Control _Some actions require a SimplePDF account. See [Retrieving PDF Data](../README.md#retrieving-pdf-data) for storage and submission behavior._ 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.detectFields()` | Automatically detect form fields in the document | | `actions.deleteFields(options?)` | Delete 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 handleDetectFields = async () => { const result = await actions.detectFields(); if (result.success) { console.log('Fields detected!'); } }; return ( <> ); }; ``` See [Retrieving PDF Data](../README.md#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 ```sh npm link npm start ``` 2. Use it in the target application ```sh npm link @simplepdf/react-embed-pdf ```