@pdfme/ui 2.1.0 → 2.2.1

package/dist/types/builtInRenderer.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer } from './types';
+declare const renderer: Renderer;
+export default renderer;

package/dist/types/class.d.ts

@@ -1,3 +1,4 @@
+import type { Renderer } from './types';
 import { Template, Size, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
 export declare abstract class BaseUIClass {
     protected domContainer: HTMLElement | null;
@@ -5,15 +6,19 @@ export declare abstract class BaseUIClass {
     protected size: Size;
     private lang;
     private font;
+    private rendererRegistry;
+    private options;
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string;
+    protected getI18n(): (key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "barColor" | "textColor" | "bgColor") => string;
     protected getFont(): Record<string, {
         data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
     }>;
+    protected getRendererRegistry(): Renderer;
+    protected getOptions(): {};
     getTemplate(): {
         schemas: Record<string, {
             type: "text";
@@ -25,6 +30,7 @@ export declare abstract class BaseUIClass {
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -54,6 +60,9 @@ export declare abstract class BaseUIClass {
                 y: number;
             };
             rotate?: number | undefined;
+            backgroundcolor?: string | undefined;
+            barcolor?: string | undefined;
+            textcolor?: string | undefined;
         }>[];
         basePdf: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         sampledata?: Record<string, string>[] | undefined;

package/dist/types/components/CtlBar/Pager.d.ts

@@ -1,7 +1,8 @@
-declare type Props = {
+import React from 'react';
+type Props = {
     pageCursor: number;
     pageNum: number;
     setPageCursor: (page: number) => void;
 };
-declare const Pager: ({ pageCursor, pageNum, setPageCursor }: Props) => JSX.Element;
+declare const Pager: ({ pageCursor, pageNum, setPageCursor }: Props) => React.JSX.Element;
 export default Pager;

package/dist/types/components/CtlBar/Zoom.d.ts

@@ -1,6 +1,7 @@
-declare type Props = {
+import React from 'react';
+type Props = {
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;
 };
-declare const Pager: ({ zoomLevel, setZoomLevel }: Props) => JSX.Element;
+declare const Pager: ({ zoomLevel, setZoomLevel }: Props) => React.JSX.Element;
 export default Pager;

package/dist/types/components/CtlBar/index.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { Size } from '@pdfme/common';
-declare type Props = {
+type Props = {
     size: Size;
     pageCursor: number;
     pageNum: number;
@@ -7,5 +8,5 @@ declare type Props = {
     zoomLevel: number;
     setZoomLevel: (zoom: number) => void;
 };
-declare const CtlBar: (props: Props) => JSX.Element;
+declare const CtlBar: (props: Props) => React.JSX.Element;
 export default CtlBar;

package/dist/types/components/Designer/Main/Guides.d.ts

@@ -1,9 +1,9 @@
-import { Ref } from 'react';
+import React, { Ref } from 'react';
 import Guides from '@scena/react-guides';
 import { Size } from '@pdfme/common';
 declare const _Guides: ({ paperSize, horizontalRef, verticalRef, }: {
     paperSize: Size;
     horizontalRef: Ref<Guides> | undefined;
     verticalRef: Ref<Guides> | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _Guides;

package/dist/types/components/Designer/Main/Mask.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Size } from '@pdfme/common';
-declare const Mask: ({ width, height }: Size) => JSX.Element;
+declare const Mask: ({ width, height }: Size) => React.JSX.Element;
 export default Mask;

package/dist/types/components/Designer/Main/Moveable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { OnDrag, OnResize, OnDragEnd, OnDragGroupEnd, OnResizeEnd, OnResizeGroupEnd, OnClick } from 'react-moveable';
-declare type Props = {
+type Props = {
     target: HTMLElement[];
     bounds: {
         left: number;

package/dist/types/components/Designer/Main/Selecto.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
 declare const _Selecto: ({ container, continueSelect, onDragStart, onSelect, }: {
     container: HTMLElement | null;
     continueSelect: boolean;
     onDragStart: (e: _OnDragStart) => void;
     onSelect: (e: _OnSelect) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _Selecto;

package/dist/types/components/Designer/Sidebar/DetailView/BarCodePropEditor.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SchemaForUI } from '@pdfme/common';
+import { SidebarProps } from '..';
+declare const BarcodePropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
+    activeSchema: SchemaForUI;
+}) => React.JSX.Element;
+export default BarcodePropEditor;

package/dist/types/components/Designer/Sidebar/DetailView/ExampleInputEditor.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const ExampleInputEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
     activeSchema: SchemaForUI;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default ExampleInputEditor;

package/dist/types/components/Designer/Sidebar/DetailView/FormComponents/ColorInputSet.d.ts

@@ -0,0 +1,9 @@
+import React, { ChangeEvent, CSSProperties } from 'react';
+declare const ColorInputSet: (props: {
+    label: string;
+    value: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClear: () => void;
+    extraStyle?: React.CSSProperties | undefined;
+}) => React.JSX.Element;
+export default ColorInputSet;

package/dist/types/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '../index';
 declare const PositionAndSizeEditor: (props: Pick<SidebarProps, 'pageSize' | 'schemas' | 'changeSchemas' | 'activeElements'> & {
     activeSchema: SchemaForUI;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default PositionAndSizeEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TextPropEditor.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '..';
 declare const TextPropEditor: (props: Pick<SidebarProps, 'changeSchemas'> & {
     activeSchema: SchemaForUI;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default TextPropEditor;

package/dist/types/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '../index';
 declare const TypeAndKeyEditor: (props: Pick<SidebarProps, 'schemas' | 'changeSchemas'> & {
     activeSchema: SchemaForUI;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default TypeAndKeyEditor;

package/dist/types/components/Designer/Sidebar/DetailView/index.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SchemaForUI } from '@pdfme/common';
 import { SidebarProps } from '../index';
-declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {
+declare const DetailView: (props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default DetailView;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableContainer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SidebarProps } from '../index';
-declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => JSX.Element;
+declare const SelectableSortableContainer: (props: Pick<SidebarProps, 'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'>) => React.JSX.Element;
 export default SelectableSortableContainer;

package/dist/types/components/Designer/Sidebar/ListView/SelectableSortableItem.d.ts

@@ -10,5 +10,5 @@ interface Props {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
 }
-declare const SelectableSortableItem: ({ isSelected, style, onSelect, onEdit, schema, schemas, onMouseEnter, onMouseLeave, }: Props) => JSX.Element;
+declare const SelectableSortableItem: ({ isSelected, style, onSelect, onEdit, schema, schemas, onMouseEnter, onMouseLeave, }: Props) => React.JSX.Element;
 export default SelectableSortableItem;

package/dist/types/components/Designer/Sidebar/ListView/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SidebarProps } from '../index';
-declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => JSX.Element;
+declare const ListView: (props: Pick<SidebarProps, 'schemas' | 'onSortEnd' | 'onEdit' | 'size' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId' | 'changeSchemas'>) => React.JSX.Element;
 export default ListView;

package/dist/types/components/Designer/Sidebar/index.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-export declare type SidebarProps = {
+export type SidebarProps = {
     height: number;
     hoveringSchemaId: string | null;
     onChangeHoveringSchemaId: (id: string | null) => void;
@@ -19,6 +20,7 @@ export declare type SidebarProps = {
         schemaId: string;
     }[]) => void;
     addSchema: () => void;
+    deselectSchema: () => void;
 };
-declare const Sidebar: (props: SidebarProps) => JSX.Element;
+declare const Sidebar: (props: SidebarProps) => React.JSX.Element;
 export default Sidebar;

package/dist/types/components/Designer/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DesignerReactProps, Template } from '@pdfme/common';
 declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, }: {
     template: {
@@ -11,6 +12,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -40,6 +42,9 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
                 y: number;
             };
             rotate?: number | undefined;
+            backgroundcolor?: string | undefined;
+            barcolor?: string | undefined;
+            textcolor?: string | undefined;
         }>[];
         basePdf: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         sampledata?: Record<string, string>[] | undefined;
@@ -60,6 +65,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             };
             rotate?: number | undefined;
             alignment?: "center" | "left" | "right" | undefined;
+            verticalAlignment?: "top" | "bottom" | "middle" | undefined;
             fontSize?: number | undefined;
             fontName?: string | undefined;
             fontColor?: string | undefined;
@@ -89,6 +95,9 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
                 y: number;
             };
             rotate?: number | undefined;
+            backgroundcolor?: string | undefined;
+            barcolor?: string | undefined;
+            textcolor?: string | undefined;
         }>[];
         basePdf: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         sampledata?: Record<string, string>[] | undefined;
@@ -100,9 +109,9 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
             fallback?: boolean | undefined;
             subset?: boolean | undefined;
         }> | undefined;
-        lang?: "th" | "en" | "ja" | "ar" | "pl" | undefined;
+        lang?: "th" | "en" | "ja" | "ar" | "pl" | "it" | undefined;
     } | undefined;
 } & {
     onChangeTemplate: (t: Template) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default TemplateEditor;

package/dist/types/components/Divider.d.ts

@@ -1,2 +1,3 @@
-declare const Divider: () => JSX.Element;
+import React from 'react';
+declare const Divider: () => React.JSX.Element;
 export default Divider;

package/dist/types/components/Error.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Size } from '@pdfme/common';
 declare const Error: ({ size, error }: {
     size: Size;
     error: Error;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Error;

package/dist/types/components/Paper.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from 'react';
+import React, { MutableRefObject, ReactNode } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
 declare const Paper: (props: {
     paperRefs: MutableRefObject<HTMLDivElement[]>;
@@ -15,5 +15,5 @@ declare const Paper: (props: {
         index: number;
         schema: SchemaForUI;
     }) => ReactNode;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default Paper;

package/dist/types/components/Preview.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { PreviewReactProps } from '@pdfme/common';
-declare const Preview: ({ template, inputs, size, onChangeInput }: PreviewReactProps) => JSX.Element;
+declare const Preview: ({ template, inputs, size, onChangeInput }: PreviewReactProps) => React.JSX.Element;
 export default Preview;

package/dist/types/components/Renderer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RendererProps } from "../types";
+declare const Renderer: (props: RendererProps) => React.JSX.Element;
+export default Renderer;

package/dist/types/components/Root.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Size } from '@pdfme/common';
-declare type Props = {
+type Props = {
     size: Size;
     scale: number;
     children: ReactNode;

package/dist/types/components/Spinner.d.ts

@@ -1,2 +1,3 @@
-declare const Spinner: () => JSX.Element;
+import React from 'react';
+declare const Spinner: () => React.JSX.Element;
 export default Spinner;

package/dist/types/components/UnitPager.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { Size } from '@pdfme/common';
-declare type Props = {
+type Props = {
     size: Size;
     unitCursor: number;
     unitNum: number;
     setUnitCursor: (page: number) => void;
 };
-declare const UnitPager: ({ size, unitCursor, unitNum, setUnitCursor }: Props) => JSX.Element;
+declare const UnitPager: ({ size, unitCursor, unitNum, setUnitCursor }: Props) => React.JSX.Element;
 export default UnitPager;

package/dist/types/contexts.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
-export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName") => string>;
+export declare const I18nContext: import("react").Context<(key: "type" | "field" | "cancel" | "fieldName" | "require" | "uniq" | "inputExample" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "barColor" | "textColor" | "bgColor") => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
 }>>;
+export declare const RendererRegistry: import("react").Context<import("./types").Renderer>;
+export declare const OptionsContext: import("react").Context<{}>;

package/dist/types/helper.d.ts

@@ -18,6 +18,7 @@ export declare const initShortCuts: (arg: {
     selectAll: () => void;
 }) => void;
 export declare const destroyShortCuts: () => void;
+export declare const blobToDataURL: (blob: Blob) => Promise<string>;
 export declare const readFiles: (files: FileList | null, type: 'text' | 'dataURL' | 'arrayBuffer') => Promise<string | ArrayBuffer>;
 export declare const px2mm: (px: number) => number;
 export declare const getPdfPageSizes: (pdfBlob: Blob) => Promise<{
@@ -42,6 +43,7 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
     lineHeight?: number | undefined;
     rotate?: number | undefined;
     alignment?: "center" | "left" | "right" | undefined;
+    verticalAlignment?: "top" | "bottom" | "middle" | undefined;
     fontName?: string | undefined;
     fontColor?: string | undefined;
     characterSpacing?: number | undefined;
@@ -74,6 +76,9 @@ export declare const templateSchemas2SchemasList: (_template: Template) => Promi
         y: number;
     };
     rotate?: number | undefined;
+    backgroundcolor?: string | undefined;
+    barcolor?: string | undefined;
+    textcolor?: string | undefined;
 })[][]>;
 export declare const fmtTemplate: (template: Template, schemasList: SchemaForUI[][]) => Template;
 export declare const getInitialSchema: () => SchemaForUI;

package/dist/types/hooks.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { Template, Size } from '@pdfme/common';
 export declare const usePrevious: <T>(value: T) => T | null;
-declare type UIPreProcessorProps = {
+type UIPreProcessorProps = {
     template: Template;
     size: Size;
     zoomLevel: number;
@@ -15,7 +15,7 @@ export declare const useUIPreProcessor: ({ template, size, zoomLevel }: UIPrePro
     scale: number;
     error: Error | null;
 };
-declare type ScrollPageCursorProps = {
+type ScrollPageCursorProps = {
     ref: RefObject<HTMLDivElement>;
     pageSizes: Size[];
     scale: number;

package/dist/types/i18n.d.ts

@@ -1,5 +1,5 @@
 import { Lang } from '@pdfme/common';
-declare type DictEn = typeof dictEn;
+type DictEn = typeof dictEn;
 declare const dictEn: {
     cancel: string;
     field: string;
@@ -20,6 +20,9 @@ declare const dictEn: {
     errorBulkUpdateFieldName: string;
     commitBulkUpdateFieldName: string;
     bulkUpdateFieldName: string;
+    barColor: string;
+    textColor: string;
+    bgColor: string;
 };
 export declare const curriedI18n: (lang: Lang) => (key: keyof DictEn) => string;
 export {};

package/dist/types/renders/barcodes.d.ts

@@ -0,0 +1,2 @@
+import type { RenderProps } from "../types";
+export declare const renderBarcode: (arg: RenderProps) => Promise<void>;

package/dist/types/renders/image.d.ts

@@ -0,0 +1,2 @@
+import type { RenderProps } from "../types";
+export declare const renderImage: (arg: RenderProps) => Promise<void>;

package/dist/types/renders/text.d.ts

@@ -0,0 +1,2 @@
+import type { RenderProps } from "../types";
+export declare const renderText: (arg: RenderProps) => Promise<void>;

package/dist/types/types.d.ts

@@ -0,0 +1,25 @@
+import type { UIOptions, SchemaForUI } from '@pdfme/common';
+interface RenderBaseProps {
+    schema: SchemaForUI;
+    mode: 'viewer' | 'form';
+    tabIndex?: number;
+    placeholder?: string;
+    stopEditing?: () => void;
+}
+export type RendererProps = RenderBaseProps & {
+    onChange: (value: string) => void;
+    outline: string;
+    onChangeHoveringSchemaId?: (id: string | null) => void;
+};
+export type RenderProps = RenderBaseProps & {
+    onChange?: (value: string) => void;
+    value: string;
+    rootElement: HTMLDivElement;
+    options: UIOptions;
+};
+export interface Renderer {
+    [key: string]: {
+        render: (arg: RenderProps) => Promise<void>;
+    } | undefined;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",
@@ -56,6 +56,7 @@
     "@types/pdfjs-dist": "^2.10.378",
     "@types/react": "^17.0.52",
     "@types/react-dom": "^17.0.18",
+    "csstype": "^3.1.2",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "jest-canvas-mock": "^2.3.1",

package/src/Designer.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
 import { BaseUIClass } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import { I18nContext, FontContext, RendererRegistry, OptionsContext } from './contexts';
 import DesignerComponent from './components/Designer/index';
 import { cloneDeep } from './helper';
 
@@ -48,22 +48,26 @@ class Designer extends BaseUIClass {
     ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
-          <DesignerComponent
-            template={this.template}
-            onSaveTemplate={(template) => {
-              this.template = template;
-              if (this.onSaveTemplateCallback) {
-                this.onSaveTemplateCallback(template);
-              }
-            }}
-            onChangeTemplate={(template) => {
-              this.template = template;
-              if (this.onChangeTemplateCallback) {
-                this.onChangeTemplateCallback(template);
-              }
-            }}
-            size={this.size}
-          />
+          <RendererRegistry.Provider value={this.getRendererRegistry()}>
+            <OptionsContext.Provider value={this.getOptions()}>
+              <DesignerComponent
+                template={this.template}
+                onSaveTemplate={(template) => {
+                  this.template = template;
+                  if (this.onSaveTemplateCallback) {
+                    this.onSaveTemplateCallback(template);
+                  }
+                }}
+                onChangeTemplate={(template) => {
+                  this.template = template;
+                  if (this.onChangeTemplateCallback) {
+                    this.onChangeTemplateCallback(template);
+                  }
+                }}
+                size={this.size}
+              />
+            </OptionsContext.Provider>
+          </RendererRegistry.Provider>
         </FontContext.Provider>
       </I18nContext.Provider>,
       this.domContainer

package/src/Form.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import { I18nContext, FontContext, RendererRegistry, OptionsContext } from './contexts';
 import Preview from './components/Preview';
 
 class Form extends PreviewUI {
@@ -23,19 +23,23 @@ class Form extends PreviewUI {
     ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
-          <Preview
-            template={this.template}
-            size={this.size}
-            inputs={this.inputs}
-            onChangeInput={(arg: { index: number; value: string; key: string }) => {
-              const { index, value, key } = arg;
-              if (this.onChangeInputCallback) {
-                this.onChangeInputCallback({ index, value, key });
-              }
-              this.inputs[index][key] = value;
-              this.render();
-            }}
-          />
+          <RendererRegistry.Provider value={this.getRendererRegistry()}>
+            <OptionsContext.Provider value={this.getOptions()}>
+              <Preview
+                template={this.template}
+                size={this.size}
+                inputs={this.inputs}
+                onChangeInput={(arg: { index: number; value: string; key: string }) => {
+                  const { index, value, key } = arg;
+                  if (this.onChangeInputCallback) {
+                    this.onChangeInputCallback({ index, value, key });
+                  }
+                  this.inputs[index][key] = value;
+                  this.render();
+                }}
+              />
+            </OptionsContext.Provider>
+          </RendererRegistry.Provider>
         </FontContext.Provider>
       </I18nContext.Provider>,
       this.domContainer

package/src/Viewer.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { PreviewProps } from '@pdfme/common';
 import { PreviewUI } from './class';
 import { DESTROYED_ERR_MSG } from './constants';
-import { I18nContext, FontContext } from './contexts';
+import { I18nContext, FontContext, RendererRegistry, OptionsContext } from './contexts';
 import Preview from './components/Preview';
 
 class Viewer extends PreviewUI {
@@ -17,7 +17,11 @@ class Viewer extends PreviewUI {
     ReactDOM.render(
       <I18nContext.Provider value={this.getI18n()}>
         <FontContext.Provider value={this.getFont()}>
-          <Preview template={this.template} size={this.size} inputs={this.inputs} />
+          <RendererRegistry.Provider value={this.getRendererRegistry()}>
+            <OptionsContext.Provider value={this.getOptions()}>
+              <Preview template={this.template} size={this.size} inputs={this.inputs} />
+            </OptionsContext.Provider>
+          </RendererRegistry.Provider>
         </FontContext.Provider>
       </I18nContext.Provider>,
       this.domContainer

package/src/builtInRenderer.ts

@@ -0,0 +1,14 @@
+import type { BarCodeType } from '@pdfme/common';
+import type { Renderer } from './types';
+import { renderText } from './renders/text';
+import { renderImage } from './renders/image';
+import { renderBarcode } from './renders/barcodes';
+
+const barCodeTypes: BarCodeType[] = ['qrcode', 'japanpost', 'ean13', 'ean8', 'code39', 'code128', 'nw7', 'itf14', 'upca', 'upce', 'gs1datamatrix']
+
+const renderer: Renderer = {
+    text: { render: renderText, },
+    image: { render: renderImage, },
+    ...barCodeTypes.reduce((acc, barcodeType) => Object.assign(acc, { [barcodeType]: { render: renderBarcode } }), {}),
+}
+export default renderer