hypnotes-pdf v1.10.4
Navigation Index
FormCreate Component
This FormCreate
component is designed for creating forms on top of a given PDF document. Users can add form fields, input fields, and signatures to the PDF document. The component supports zoom in/out, next/previous page navigation, and saving the document with added fields.
Features
- Render a PDF document with the provided
pdfUrl
- Add form fields (text, checkbox, and signature) and input fields (text and signature) to the PDF document
- Resize and move form and input fields
- Navigate through the pages of the PDF document
- Zoom in and out of the PDF document
- Save the PDF document with the added fields
Props
pdfUrl
: String (required) - The URL of the PDF document to be renderedonSaveDocument
: Function (required) - Callback function to be called when the "Save" button is clicked, receiving the form fields and input fields as arguments
Dependencies
pdfjs-dist
: A library to parse and render PDF documentsreact-signature-canvas
: A library to create signature input fields- Custom hooks:
usePdfRenderer
,useWindowSize
Usage
import FormCreate from "./FormCreate";
const App = () => {
const pdfUrl = "/path/to/your/pdf/document.pdf";
const handleSaveDocument = (formFields, inputFields) => {
// Save the document with added fields
// ...
};
return (
<div>
<FormCreate pdfUrl={pdfUrl} onSaveDocument={handleSaveDocument} />
</div>
);
};
export default App;
FormFill Component
The FormFill
component allows users to fill out forms on a given PDF document. It supports text, checkbox, and signature input fields, and allows users to navigate through the PDF document, zoom in and out, and save the filled document.
Features
- Render a PDF document with the provided
pdfUrl
- Fill out text, checkbox, and signature input fields
- Navigate through the pages of the PDF document
- Zoom in and out of the PDF document
- Save the filled PDF document
Props
pdfUrl
: String (required) - The URL of the PDF document to be renderedformFields
: Array (required) - An array of form fields to be rendered on the PDF documentonSaveDocument
: Function (required) - Callback function to be called when the "Save" button is clicked, receiving the form fields and input fields as arguments
Dependencies
pdfjs-dist
: A library to parse and render PDF documentsreact-signature-canvas
: A library to create signature input fields- Custom hooks:
usePdfRenderer
,useWindowSize
Usage
import React from "react";
import FormFill from "./FormFill";
const App = () => {
const pdfUrl = "/path/to/your/pdf/document.pdf";
const formFields = [/* ... */];
const handleSaveDocument = (formFields, inputFields) => {
// Save the document with added fields
// ...
};
return (
<div>
<FormFill pdfUrl={pdfUrl} formFields={formFields} onSaveDocument={handleSaveDocument} />
</div>
);
};
export default App;
9 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
10 months ago
12 months ago
12 months ago
12 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago