@pdfme/ui 4.5.2 → 5.0.0-dev.1

package/README.md

@@ -27,6 +27,7 @@
 
 <p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
 
+
 ## Features
 
 | Fast PDF Generator                                                                           | Easy PDF template design                              | Simple JSON template                                           |
@@ -70,6 +71,9 @@ npm i @pdfme/ui @pdfme/common
 
 \*You must install `@pdfme/common` regardless of which package you use.
 
+On NPM stable releases are published to the `latest` tag, and pre-releases are published to the `next` tag.
+On the `dev` tag you can find releases for every commit to the `main` branch.
+
 The following type, function and classes are available in pdfme.
 
 `@pdfme/common`
@@ -117,9 +121,8 @@ The following image is a good illustration of a template.
 **basePdf** can be given a `string`(base64), `ArrayBuffer`, or `Uint8Array`.  
 A blank A4 PDF can be imported with `BLANK_PDF`. You can use it to check how it works.
 
-**schemas** can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the `@pdfme/schemas` package.  
-Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above.  
-Check detail about [Custom Schemas](https://pdfme.com/docs/custom-schemas) from here
+**Schemas** can only utilize text by default, but you can load images and various barcodes like QR codes as plugins from the `@pdfme/schemas` package.  
+Additionally, you can create your own schemas, allowing you to render types other than the ones mentioned above. Check detail about [Custom Schemas](https://pdfme.com/docs/custom-schemas) from here.
 
 Let's take a look at some specific data.  
 (If you are using TypeScript, you can import the Template type.)
@@ -132,26 +135,29 @@ import { Template, BLANK_PDF } from '@pdfme/common';
 const template: Template = {
   basePdf: BLANK_PDF,
   schemas: [
-    {
-      a: {
+    [
+      {
+        name: 'a',
         type: 'text',
         position: { x: 0, y: 0 },
         width: 10,
         height: 10,
       },
-      b: {
+      {
+        name: 'a',
         type: 'text',
         position: { x: 10, y: 10 },
         width: 10,
         height: 10,
       },
-      c: {
+      {
+        name: 'c',
         type: 'text',
         position: { x: 20, y: 20 },
         width: 10,
         height: 10,
       },
-    },
+    ],
   ],
 };
 ```
@@ -193,7 +199,7 @@ Also, each element in the inputs array corresponds to a page in the PDF, you can
 
 ## UI
 
-The UI is composed of the Designer, Form, and Viewer classes.
+The UI is composed of the [Designer](https://pdfme.com/docs/getting-started#designer), [Form](https://pdfme.com/docs/getting-started#form), and [Viewer](https://pdfme.com/docs/getting-started#viewer) classes.
 
 ### Designer
 
@@ -225,7 +231,6 @@ The designer instance can be manipulated with the following methods.
 - `saveTemplate`
 - `updateTemplate`
 - `getTemplate`
-- `getPageCursor`
 - `onChangeTemplate`
 - `onSaveTemplate`
 - `destroy`
@@ -286,6 +291,72 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 ![](https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/viewer.png)
 
+### Using additional schemas and custom plugins
+
+The examples so far use only the `text` schema type. There are many others built-in within the `@pdfme/schemas` package, and you can use your own:
+
+Here's an example using additional schemas from built-in and custom plugins:
+
+```ts
+import { Template, BLANK_PDF } from '@pdfme/common';
+import { text, barcodes, image } from '@pdfme/schemas';
+import myPlugin from './custom-plugins';
+
+const template: Template = {
+  basePdf: BLANK_PDF,
+  schemas: [
+    [
+      {
+        name: 'example_text',
+        type: 'text',
+        position: { x: 0, y: 0 },
+        width: 40,
+        height: 10,
+      },
+      {
+        name: 'example_image',
+        type: 'image',
+        position: { x: 200, y: 200 },
+        width: 60,
+        height: 40,
+      },
+      {
+        name: 'example_qr_code',
+        type: 'qrcode',
+        position: { x: 100, y: 100 },
+        width: 50,
+        height: 50,
+      },
+    ],
+  ],
+};
+
+const plugins = {
+  Text: multiVariableText,
+  'QR Code': barcodes.qrcode,
+  Image: image,
+  MyPlugin: myPlugin
+}
+
+const inputs = [{ 
+  example_text: 'a1', 
+  example_image: 'data:image/png;base64,iVBORw0KG....', 
+  example_qr_code: 'https://pdfme.com/' 
+}];
+
+generate({ template, inputs, plugins }).then((pdf) => {
+    console.log(pdf);
+});
+
+```
+
+
+
+## Examples using pdfme
+
+If you are looking for code examples using pdfme to get started, please check out the [pdfme-playground](https://github.com/pdfme/pdfme-playground) repository
+or look at the examples in the `websit/src/pages/` folder of this repository. Settings these up is covered in the [DEVELOPMENT.md](DEVELOPMENT.md) file.
+
 ## Special Thanks
 
 - [pdf-lib](https://pdf-lib.js.org/): Used in PDF generation.
@@ -297,7 +368,7 @@ const viewer = new Viewer({ domContainer, template, inputs });
 - [react-moveable](https://daybrush.com/moveable/), [react-selecto](https://github.com/daybrush/selecto), [@scena/react-guides](https://daybrush.com/guides/): Used in Designer UI.
 - [dnd-kit](https://github.com/clauderic/dnd-kit): Used in Designer UI.
 
-  I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
+I definitely could not have created pdfme without these libraries. I am grateful to the developers of these libraries.
 
 If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.  
 We look forward to your contribution!