Core Components
Quick Reference
JoyDoc Component
The main form builder component for creating and editing JoyDoc forms.
import { JoyDoc, getDefaultDocument } from '@joyfill/components';
function App() {
return (
<JoyDoc
doc={getDefaultDocument()}
mode="edit"
view="desktop"
onChange={(changelogs, doc) => console.log('Document updated:', doc)}
features={{
validateSchema: true,
readableIds: true
}}
/>
);
}
doc - The JoyDoc document object containing form structure and datamode - Display mode: ‘edit’, ‘view’, or ‘preview’onChange - Callback fired when document changesfeatures - Feature flags for enabling/disabling functionality
JoyDocExporter Component
PDF export component for rendering JoyDoc forms as PDF-ready layouts.
import { JoyDocExporter, getDefaultDocument } from '@joyfill/components';
function App() {
const myDocument = getDefaultDocument();
return (
<JoyDocExporter
doc={myDocument}
config={{
page: {
height: 1056,
width: 816,
padding: 20
}
}}
theme={{
fontFamily: 'sans-serif',
field: {
margin: 4
}
}}
/>
);
}
Note: For JavaScript usage, you must import from dist/joyfill.min.js because it’s a UMD bundle that includes React and provides browser-friendly wrapper functions. The main package exports (@joyfill/components) are React components that require React as a peer dependency.
Common Patterns
Creating a New Document
import { getDefaultDocument } from '@joyfill/components';
const newDoc = getDefaultDocument();
console.log('Document ID:', newDoc._id);
Duplicating a Template
import { duplicate } from '@joyfill/components';
const copy = duplicate(template, { name: "Template Copy" });
Validating a Document
import { validator, validateSchema } from '@joyfill/components';
// Field validation
const result = validator(doc, { view: 'desktop' });
// Schema validation
const schemaError = validateSchema(doc);
if (schemaError) {
console.error('Schema validation failed:', schemaError.message);
}
Next Steps
