hypnotes-pdf

Navigation Index

• Form Create
• Form Fill

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 rendered
• onSaveDocument: 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 documents
• react-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 rendered
• formFields: Array (required) - An array of form fields to be rendered on the PDF document
• onSaveDocument: 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 documents
• react-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;