Complete eSign component API
Component Props Required Props Unique identifier for this signing session
Document configuration source
string | File | Blob
required
Document to display
validation.scroll.required
Require scrolling to bottom before signing
Called when document is signed ( data : SubmitData ) => void | Promise < void > Optional Props Field configuration Values to inject into document
Interactive fields for user to complete
Download button configuration Submit button configuration Handle download action ( data : DownloadData ) => void | Promise < void > Monitor state changes ( state : SigningState ) => void Track field changes ( field : FieldChange ) => void Called when document fields are found ( fields : FieldInfo []) => void Inline styles for container
Height of document viewer (default: '600px')
Types SubmitData Data passed to onSubmit:
interface SubmitData { eventId : string ; // Your session ID timestamp : string ; // ISO timestamp duration : number ; // Time spent in ms auditTrail : AuditEvent []; // All events documentFields : DocumentField []; // Injected values signerFields : SignerFieldValue []; // User inputs isFullyCompleted : boolean ; // All requirements met } DownloadData Data passed to onDownload:
interface DownloadData { eventId : string ; // Your session ID documentSource : string | File | Blob ; // Original .docx file fileName : string ; // Suggested filename } DocumentField Values injected into document:
interface DocumentField { id : string ; // Unique field ID value : FieldValue ; // The value } SignerField Interactive field definition:
interface SignerField { id : string ; // Required unique ID type : 'signature' | 'checkbox' | 'text' ; label ?: string ; // Display label validation ?: { required ?: boolean ; }; component ?: React . ComponentType < FieldComponentProps >; } SigningState Current state passed to onStateChange:
interface SigningState { scrolled : boolean ; // Has scrolled fields : Map < string , FieldValue >; // Current values isValid : boolean ; // Can submit isSubmitting : boolean ; // Currently submitting } AuditEvent Timestamped interaction log:
interface AuditEvent { timestamp : string ; type : 'ready' | 'scroll' | 'field_change' | 'submit' ; data ?: Record < string , unknown >; } Ref Methods Access via ref:
const ref = useRef (); // Get current state const state = ref . current . getState (); // Get audit trail const audit = ref . current . getAuditTrail (); // Reset everything ref . current . reset (); return < SuperDocESign ref = { ref } ... /> Available methods
getState() - Returns current SigningStategetAuditTrail() - Returns audit events arrayreset() - Clear all state and start over
Field Components Default Components The component provides default implementations for all field types. You can import and extend them:
import { SignatureInput , CheckboxInput } from '@superdoc-dev/esign' ; // Use directly < SignatureInput value = { value } onChange = { handleChange } isDisabled = { false } label = "Sign here" /> Custom Component Props All custom field components receive:
interface FieldComponentProps { value : FieldValue ; // Current value onChange : ( value : FieldValue ) => void ; isDisabled : boolean ; // Disabled state isValid ?: boolean ; // Validation state label ?: string ; // Field label error ?: string ; // Error message } CSS Classes Target these classes for styling:
.superdoc-esign-container - Main wrapper.superdoc-esign-document - Document viewer area.superdoc-esign-controls - Controls section.superdoc-esign-fields - Field container.superdoc-esign-actions - Button container.superdoc-esign-btn - Default buttons
Import Types All types are exported:
import type { SuperDocESignProps , SubmitData , DownloadData , SigningState , DocumentField , SignerField , FieldChange , AuditEvent , FieldComponentProps } from '@superdoc-dev/esign' ; 
