@docuseal/react
Version:
DocuSeal React components to integrate documents signing process into apps. ✍️
210 lines (209 loc) • 6.58 kB
TypeScript
import React from 'react';
export type DocusealBuilderField = {
name: string;
type?: string;
role?: string;
title?: string;
description?: string;
required?: boolean;
readonly?: boolean;
default_value?: string;
width?: number;
height?: number;
options?: string[];
preferences?: {
font_size?: number;
font_type?: "bold" | "italic" | "bold_italic";
mask?: boolean | number;
font?: "Times" | "Helvetica" | "Courier";
color?: "black" | "white" | "blue";
align?: "left" | "center" | "right";
valign?: "top" | "center" | "bottom";
format?: string;
price?: number;
with_signature_id?: boolean;
currency?: "USD" | "EUR" | "GBP" | "CAD" | "AUD";
};
validation?: {
pattern?: string;
message?: string;
min?: number | string;
max?: number | string;
step?: number;
};
};
export type DocusealBuilderSubmitter = {
email?: string;
role?: string;
name?: string;
phone?: string;
};
export type DocusealBuilderSendData = {
id: number;
created_at: string;
archived_at: string | null;
template_submitters: Array<{
name: string;
uuid: string;
is_requester?: boolean;
linked_to_uuid?: string | null;
order?: number;
invite_via_field_uuid?: string | null;
optional_invite_by_uuid?: string | null;
invite_by_uuid?: string | null;
email?: string;
}>;
template: {
id: number;
name: string;
external_id: string | null;
created_at: string;
};
submitters: Array<{
id: number;
uuid: string;
email: string;
completed_at: string | null;
opened_at: string | null;
sent_at: string | null;
status_event_at: string;
status: string;
}>;
};
type DocusealBuilderTemplateData = {
id: number;
author_id: number;
folder_id: number | null;
external_id: string | null;
name: string;
slug: string;
source: string | null;
archived_at: string | null;
created_at: string;
updated_at: string;
shared_link: boolean;
preferences: Record<string, unknown> | null;
variables_schema: Record<string, unknown> | null;
schema: Array<{
attachment_uuid: string;
name: string;
google_drive_file_id?: string;
dynamic?: boolean;
conditions?: Array<{
field_uuid: string;
value: string;
action: string;
operation: string;
}>;
}>;
fields: Array<{
uuid: string;
submitter_uuid: string;
name: string;
type: string;
required: boolean;
readonly?: boolean;
default_value?: string | string[] | null;
title?: string;
description?: string;
prefillable?: boolean;
preferences?: Record<string, unknown>;
options?: Array<{
value: string;
uuid: string;
}>;
validation?: {
message?: string;
pattern?: string;
min?: number;
max?: number;
step?: number;
};
conditions?: Array<{
field_uuid: string;
value: string;
action: string;
operation: string;
}>;
areas?: Array<{
uuid: string;
x: number;
y: number;
w: number;
h: number;
cell_w?: number;
attachment_uuid: string;
option_uuid?: string;
page: number;
}>;
}>;
submitters: Array<{
name: string;
uuid: string;
is_requester?: boolean;
linked_to_uuid?: string | null;
order?: number;
invite_via_field_uuid?: string | null;
optional_invite_by_uuid?: string | null;
invite_by_uuid?: string | null;
email?: string;
}>;
};
export type DocusealBuilderLoadData = DocusealBuilderTemplateData;
export type DocusealBuilderUploadData = DocusealBuilderTemplateData;
export type DocusealBuilderSaveData = DocusealBuilderTemplateData;
export type DocusealBuilderChangeData = DocusealBuilderTemplateData;
export type DocusealBuilderProps = {
token: string;
host?: string;
withRecipientsButton?: boolean;
withSendButton?: boolean;
withTitle?: boolean;
withDocumentsList?: boolean;
withDynamicDocuments?: boolean;
withFieldsList?: boolean;
withFieldsDetection?: boolean;
withFieldPlaceholder?: boolean;
withPrefillable?: boolean;
withCustomFieldsTab?: boolean;
onlyDefinedFields?: boolean;
preview?: boolean;
previewMode?: boolean;
inputMode?: boolean;
language?: string;
autosave?: boolean;
roles?: string[];
fieldTypes?: string[];
drawFieldType?: string;
fields?: DocusealBuilderField[];
submitters?: DocusealBuilderSubmitter[];
requiredFields?: DocusealBuilderField[];
dateFormats?: string[];
i18n?: object;
withSignYourselfButton?: boolean;
withUploadButton?: boolean;
withSignatureId?: boolean;
withRevisions?: boolean;
withAddPageButton?: boolean;
onLoad?: (data: DocusealBuilderLoadData) => void;
onUpload?: (data: DocusealBuilderUploadData) => void;
onSend?: (data: DocusealBuilderSendData) => void;
onSave?: (data: DocusealBuilderSaveData) => void;
onChange?: (data: DocusealBuilderChangeData) => void;
customButton?: {
title: string;
url: string;
};
emailMessage?: {
subject: string;
body: string;
};
backgroundColor?: string;
saveButtonText?: string;
sendButtonText?: string;
className?: string;
customCss?: string;
style?: React.CSSProperties;
};
declare const DocusealBuilder: ({ token, host, language, preview, previewMode, inputMode, autosave, withRecipientsButton, withDocumentsList, withDynamicDocuments, withFieldsList, withFieldsDetection, withFieldPlaceholder, withPrefillable, withCustomFieldsTab, withSendButton, withTitle, onlyDefinedFields, withSignYourselfButton, withUploadButton, withAddPageButton, withSignatureId, withRevisions, roles, fields, submitters, requiredFields, dateFormats, i18n, fieldTypes, drawFieldType, customButton, emailMessage, backgroundColor, onLoad, onUpload, onSend, onSave, onChange, className, sendButtonText, saveButtonText, customCss, style }: DocusealBuilderProps) => JSX.Element;
export default DocusealBuilder;