Last active
July 12, 2022 03:50
-
-
Save Morganjackson/ab35b8046345fbf2d38e4ba754c87cc2 to your computer and use it in GitHub Desktop.
PDFKIT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useEffect, useMemo, useRef } from 'react' | |
| export default function Document({ values }: any) { | |
| const containerRef = useRef(null) | |
| const instantJSON = useMemo( | |
| () => ({ | |
| format: 'https://pspdfkit.com/instant-json/v1', | |
| formFieldValues: [ | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'agentName', | |
| value: values?.agentName, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'agentAddress', | |
| value: values?.agentAddress, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'agentMobile', | |
| value: values?.agentMobile, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'agentEmail', | |
| value: values?.agentEmail, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'vendorName', | |
| value: values?.vendorName, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'vendorAddress', | |
| value: values?.vendorAddress, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'vendorMobile', | |
| value: values?.vendorMobile, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'vendorEmail', | |
| value: values?.vendorEmail, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'propertyAddress', | |
| value: values?.propertyAddress, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'price', | |
| value: values?.vendorPrice, | |
| }, | |
| { | |
| v: 1, | |
| type: 'pspdfkit/form-field-value', | |
| name: 'payable', | |
| value: values?.payableIn, | |
| }, | |
| ], | |
| }), | |
| [values] | |
| ) | |
| useEffect(() => { | |
| const container = containerRef.current | |
| let PSPDFKit: any | |
| const initializePSPDFKit = async () => { | |
| PSPDFKit = await import('pspdfkit') | |
| if (PSPDFKit) { | |
| PSPDFKit.unload(container) | |
| } | |
| return await PSPDFKit.load({ | |
| container, | |
| instantJSON, | |
| document: '/exclusive-sale-form.pdf', | |
| baseUrl: `${window.location.protocol}//${window.location.host}/`, | |
| toolbarItems: [ | |
| ...PSPDFKit.defaultToolbarItems, | |
| { | |
| type: 'form-creator', | |
| }, | |
| ], | |
| }) | |
| } | |
| initializePSPDFKit() | |
| return () => PSPDFKit && PSPDFKit.unload(container) | |
| }, [instantJSON]) | |
| return <div ref={containerRef} style={{ height: '100vh' }} /> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment