Skip to main content

​
JoyDoc

Main form builder component for creating and editing JoyDoc forms. Kind: React Component
Returns: JSX.Element - The JoyDoc component

​
Props

ParamTypeDefaultDescription
docObjectThe JoyDoc document object containing form structure and data
modestring'edit'Display mode: ‘edit’, ‘view’, or ‘preview’
viewstring'desktop'View type: ‘desktop’, ‘mobile’, or ‘tablet’
themeObjectCustom theme object for styling
widthnumber816Component width in pixels
heightnumber1056Component height in pixels
initialPageIdstringID of the initially active page
lazyloadbooleanfalseEnable lazy loading for performance
featuresObjectFeature flags object
features.formulasbooleanfalseEnable formula support
features.readableIdsbooleanfalseUse readable IDs instead of object IDs
features.repeatingHeaderAndFooterbooleanfalseEnable repeating headers/footers
features.validateSchemabooleanfalseEnable schema validation
fieldOptionsArrayCustom field options array
fieldSettingsObjectCustom settings for different targets (page, field, table column)
identifiersObjectIdentifier configuration
onChangefunctionCallback fired when document changes
onCaptureAsyncfunctionAsync callback for field capture
onUploadAsyncfunctionAsync callback for file uploads
onErrorfunctionError handler callback
onFocusfunctionField focus handler
onBlurfunctionField blur handler
validateSchemabooleanfalseEnable schema validation

​
Example

import { JoyDoc } from '@joyfill/components';

<JoyDoc
  doc={myDocument}
  mode="edit"
  view="desktop"
  onChange={(updatedDoc) => console.log('Document updated:', updatedDoc)}
  features={{
    validateSchema: true,
    readableIds: true
  }}
/>

​
Features Configuration

The features prop allows you to enable/disable various functionalities: 
<JoyDoc
  doc={myDocument}
  features={{
    formulas: true,              // Enable formula calculations
    readableIds: true,           // Use human-readable IDs
    repeatingHeaderAndFooter: true, // Repeat headers/footers on each page
    validateSchema: true         // Enable schema validation
  }}
/>

​
Event Handlers

<JoyDoc
  doc={myDocument}
  onChange={(updatedDoc) => {
    // Called when any field value changes
    console.log('Document updated:', updatedDoc);
  }}
  onFocus={(field) => {
    // Called when a field receives focus
    console.log('Field focused:', field);
  }}
  onBlur={(field) => {
    // Called when a field loses focus
    console.log('Field blurred:', field);
  }}
  onError={(error) => {
    // Called when an error occurs
    console.error('Error:', error);
  }}
/>

​
File Upload Handling

<JoyDoc
  doc={myDocument}
  onUploadAsync={async (file) => {
    // Handle file upload
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    
    const { url } = await response.json();
    return url; // Return the uploaded file URL
  }}
/>

​
JoyDocExporter

PDF export component for rendering JoyDoc forms as PDF-ready layouts. Kind: React Component
Returns: JSX.Element - The JoyDocExporter component

​
Props

ParamTypeDefaultDescription
docObjectThe JoyDoc document to export
themeObjectCustom theme object for styling
licensestringJWT license key for validation
configObjectExport configuration
config.pageObjectPage configuration
config.page.heightnumber1056Page height in pixels
config.page.widthnumber816Page width in pixels
config.page.paddingnumber0Page padding in pixels

​
Example

import { JoyDocExporter } from '@joyfill/components';

<JoyDocExporter
  doc={myDocument}
  config={{
    page: {
      height: 1056,
      width: 816,
      padding: 20
    }
  }}
/>

​
PDF Export Workflow

Here’s a complete example of exporting a JoyDoc to PDF: 
import React from 'react';
import { JoyDocExporter } from '@joyfill/components';
import html2pdf from 'html2pdf.js';

function ExportToPDF({ document }) {
  const exportRef = React.useRef();
  
  const handleExport = () => {
    const element = exportRef.current;
    const options = {
      margin: 0,
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'px', format: [816, 1056], orientation: 'portrait' }
    };
    
    html2pdf().set(options).from(element).save();
  };
  
  return (
    <div>
      <button onClick={handleExport}>Export to PDF</button>
      <div ref={exportRef}>
        <JoyDocExporter
          doc={document}
          config={{
            page: {
              height: 1056,
              width: 816,
              padding: 20
            }
          }}
        />
      </div>
    </div>
  );
}

​
Custom Styling

Apply custom themes to the exporter: 
<JoyDocExporter
  doc={myDocument}
  theme={{
    primaryColor: '#0066FF',
    fontFamily: 'Arial, sans-serif',
    fontSize: 14
  }}
  config={{
    page: {
      height: 1056,
      width: 816,
      padding: 20
    }
  }}
/>