Skip to main content
All eSign options and customization

​
Document options

Control how the document is displayed and what’s required: 
document={{
  // Required - the document to display
  source: File | Blob | string,
  
  // Display mode
  mode: 'full',        // Default: full editor
  
  // Requirements
  validation: {
    scroll: { required: true }  // Must scroll to bottom
  }
}}

​
Field system

Fields use a unique id system for identifying and updating content:
  • id - Unique identifier for the field

​
Document fields (injected values)

fields={{
  document: [
    { id: 'field_customer_name', value: 'Jane Smith' },
    { id: 'field_contract_date', value: '2024-01-15' },
    { id: 'field_amount', value: '$50,000' }
  ]
}}
These update fields with matching IDs in your document.

​
Signer fields (interactive)

fields={{
  signer: [
    {
      id: 'sig1',
      type: 'signature',
      label: 'Your Signature',
      validation: { required: true }
    },
    {
      id: 'accept_terms',
      type: 'checkbox',
      label: 'I accept the terms',
      validation: { required: true }
    },
    {
      id: 'newsletter',
      type: 'checkbox',
      label: 'Send me updates',
      validation: { required: false }
    }
  ]
}}
Field types:
  • signature - Text input or canvas (detects automatically)
  • checkbox - Checkbox field
  • text - Text input field

​
Custom components

Three levels of customization:

​
Level 1: Use defaults

<SuperDocESign 
  document={{ source: "doc.pdf" }} 
  onSubmit={handleSubmit} 
/>

​
Level 2: Customize labels

submit={{ label: "I Agree" }}
download={{ label: "Save Copy", fileName: "agreement.pdf" }}

​
Level 3: Custom components

// Custom submit button
submit={{
  component: ({ onClick, isValid, isDisabled, isSubmitting }) => (
    <button 
      onClick={onClick}
      disabled={!isValid || isDisabled}
      className="my-custom-button"
    >
      {isSubmitting ? <Spinner /> : 'Sign Document'}
    </button>
  )
}}

// Custom signature field
fields={{
  signer: [{
    id: 'sig',
    type: 'signature',
    component: ({ value, onChange, isDisabled, label }) => (
      <SignaturePad
        value={value}
        onComplete={onChange}
        disabled={isDisabled}
        title={label}
      />
    )
  }]
}}

​
Event handlers

// Main submission
onSubmit={async (data) => {
  // data.eventId - Your session ID
  // data.auditTrail - Complete interaction log
  // data.signerFields - User inputs
  await api.save(data);
}}

// Download handling
onDownload={async (data) => {
  // data.documentSource - Original .docx file
  // data.fileName - Suggested filename
  // Send to backend for PDF conversion
  const response = await fetch('/api/generate-pdf', {
    method: 'POST',
    body: JSON.stringify(data)
  });
  const blob = await response.blob();
  saveAs(blob, data.fileName);
}}

// State monitoring
onStateChange={(state) => {
  // state.scrolled - Has scrolled to bottom
  // state.fields - Current field values
  // state.isValid - Ready to submit
  console.log('Ready:', state.isValid);
}}

// Field changes
onFieldChange={(field) => {
  // field.id - Field identifier
  // field.value - New value
  // field.previousValue - Old value
  analytics.track('field_changed', field);
}}

// Document analysis
onFieldsDiscovered={(fields) => {
  // All fields found in document
  console.log('Document has fields:', fields);
}}

​
Styling

// CSS classes
<SuperDocESign
  className="my-esign-container"
  style={{ maxWidth: '800px' }}
  documentHeight="500px"  // Height of document viewer
/>
Default CSS classes you can override:
  • .superdoc-esign-container - Main wrapper
  • .superdoc-esign-document - Document viewer
  • .superdoc-esign-controls - Fields and buttons area
  • .superdoc-esign-fields - Field container
  • .superdoc-esign-actions - Button container

​
Complete example

<SuperDocESign
  eventId={`session-${Date.now()}`}
  
  document={{
    source: contractFile,
    mode: 'full',
    validation: {
      scroll: { required: true }
    }
  }}
  
  fields={{
    document: [
      { id: 'field_company', value: companyName },
      { id: 'field_date', value: new Date().toLocaleDateString() }
    ],
    signer: [
      {
        id: 'signature',
        type: 'signature',
        validation: { required: true },
        label: 'Sign here'
      },
      {
        id: 'terms',
        type: 'checkbox',
        validation: { required: true },
        label: 'I accept all terms'
      }
    ]
  }}
  
  download={{ 
    fileName: 'signed-contract.pdf',
    label: 'Download Copy'
  }}
  
  submit={{ 
    label: 'Complete Signing'
  }}
  
  onSubmit={handleSubmit}
  onStateChange={updateUI}
  
  className="contract-signer"
  documentHeight="600px"
/>
⌘I